라디오 버튼 기능이있는 확인란

<style> 
    .chb 
    { 
     width: 30px; 
    } 
</style> 

<script type="text/javascript" src="jquery-1.5.2.js"></script> 
<script> 
    $(".chb").each(function() { 
     $(this).change(function() { 
      $(".chb").attr('checked',false); 
      $(this).attr('checked',true); 
     }); 
    }); 
</script> 

<form action="demo_form.asp"> 
    <input type="checkbox" name="vehicle" value="Bike" class ="chb"> I have a bike<br> 
    <input type="checkbox" name="vehicle" value="Car" checked="checked" class="chb"> I have a car <br> 
</form>

위 코드에는 라디오 버튼 기능이있는 두 개의 확인란이 들어 있습니다. 이것은 잘 작동합니다. 하지만 jquery를 사용하지 않고 javascript로이를 수행하는 방법. 이것을 달성하는 방법.라디오 버튼 기능이있는 확인란

출처

2012-11-24 Rithu

왜 라디오 버튼을 사용하지 않는 것이 좋습니까? –

의미 상 라디오 버튼을 사용해야합니다. –

클라이언트는 jquery – Rithu

에 맞게 사용자 정의하는 방법에 대한 아이디어를 줄 것이다 경우에만 기능에 대한 그리고 당신은 당신 우려 체크 박스가 많으면 쉽게 해결할 수 있습니다.

<script> 
    function func(checkBox) { 
     var inputs = document.getElementsByTagName("input"); 
     for(var j = 0; j < inputs.length; j++) { 
      if(inputs[j].type == "checkbox" && (inputs[j].className == "chb")){ 
      inputs[j].checked = false; 
      }  
     } 
     checkBox.checked = true; 
    } 
</script>

이제 모든 체크 박스에 onclick 이벤트를 추가하십시오.

<input type="checkbox" name="vehicle" value="Bike" class ="chb" onclick="func(this);"> I have a bike<br> 
<input type="checkbox" name="vehicle" value="Car" checked="checked" class="chb" onclick="func(this);"> I have a car <br>

출처

2012-11-24 05:34:50 prageeth

예. 이것은 잘 작동합니다. 감사합니다. – Rithu

비 jQuery 접근 방식을 좋아합니다. (말장난 없음) –

이것은 훌륭한 코드입니다! – MVCKarl

세부 사항 : 아마 아닐 가장 코드의 우아한하지만 트릭을 할 것입니다 당신에게 당신의 목적

<input type="checkbox" name="chkFirst" onclick="CheckboxCheck('first')" /> 
<input type="checkbox" name="chkSecond" onclick="CheckboxCheck('second')" /> 

<script> 
    function CheckboxCheck(checkbox) 
    { 
     var firstCheckbox = document.getElementById('chkFirst'); 
     var secondCheckbox = document.getElementById('chkSecond'); 

     if (checkbox == "first") 
     { 
      if (secondCheckbox.checked && firstCheckbox.checked == true) 
      { 
       secondCheckbox.checked = false; 
      } 
     } 
     else 
     { 
      if (firstCheckbox.checked && secondCheckbox.checked == true) 
      { 
       firstCheckbox.checked = false; 
      } 
     } 
    } 
</script>

출처

2012-11-24 05:29:35 MVCKarl

체크 박스 기능을 사용하고 있습니다. – Rithu

당신은 클래스 이름 chb에 입력이 기능을 필요로한다고 가정하고있다. 그렇지 않으면 더 많은 루프가 필요합니다.

<!DOCTYPE html> 
<html lang="en-CA"> 
<head> 
    <meta charset="utf-8"> 
    <title> My page </title> 
    <script> 
    function doCrazyCheckRadioThing(v) { 
     var checkboxes, i; 

     for(i=0, checkboxes = document.getElementsByClassName('chb'); i<checkboxes.length; i+=1) { 
      checkboxes[i].checked = (checkboxes[i].value === v); 
     } 
    } 

    function init() { 
     var checkboxes, i; 

     for(i=0, checkboxes = document.getElementsByClassName('chb'); i<checkboxes.length; i+=1) { 
      checkboxes[i].addEventListener('change', function() { 
       doCrazyCheckRadioThing(this.value); 
      }, false); 
     } 
    } 

    document.addEventListener('DOMContentLoaded', init, false); 
    </script> 
<body> 
    <form action="demo_form.asp"> 
     <input type="checkbox" name="vehicle" id='bike' value="Bike" class="chb"> I have a bike<br> 
     <input type="checkbox" name="vehicle" id='car' value="Car" checked="checked" class="chb"> I have a car <br> 
    </form>

가 다시 내가 그 HTML이 작업을 수행하는 코딩 방법 매우 비 의미 론적 입니다 강조해야합니다

여기에 언급 된 다른 솔루션과는 달리, 내 코드는 모든 체크 박스에 onclick를 추가 할 필요가 없습니다 .

출처

2012-11-24 05:38:36

고마워,이게 나를 위해 잘 작동 – Rithu

하지만 당신은 매우 맞습니다. 이것은 매우 비 의미 상적인 방식입니다. 나는이 점을 받아 들인다. – Rithu

어쩌면 케이크를 먹을 수도 있습니다. 이것이 외양에 불과하고 CSS 솔루션을 고려해 볼 수 있다면 코드에 라디오 버튼을 추가하여 체크 박스처럼 보이게 할 수 있습니다.

input[type="radio"] { 
    -webkit-appearance: checkbox; 
    -moz-appearance: checkbox; 
}

아니요 javascript 또는 jQuery가 필요하지 않습니다. 그러나, 크로스 브라우저 친화적 인 방법을 테스트하지 않았습니다. Chrome 및 Firefox에서는 확실히 작동합니다. IE에서는 작동하지 않습니다.

출처

2012-11-24 05:43:37 Abhilash

이것은 좋은 생각이다. 이것에 정말 감사드립니다. 큰 – Rithu

라디오 버튼 기능이있는 확인란

답변

관련 문제