javascript는 클릭시 선택 가능 확인란을 선택하고 한 번에 하나만 선택하십시오.

저는 chkBox100 등의 ID 및 onClick 기능을 사용하여 동적으로 확인란을 생성합니다.javascript는 클릭시 선택 가능 확인란을 선택하고 한 번에 하나만 선택하십시오.

내가 뭘 원하는

은 한 번에 하나 개의 체크 박스를 선택합니다.
이전 확인란을 선택하고 다른 확인란을 선택하면 이전 것을 선택하십시오.
내가 선택한 확인란을 클릭하면 선택을 취소해야합니다.

jquery 또는 다른 라이브러리없이 표준 자바 스크립트에서 수행하고 싶습니다.

도움을 받으실 수 있도록 도와주세요. 지금까지 내 코드가 있습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <title> New Document </title> 

    <script type="text/javascript"> 

     function toggle(chkBox) 
     { 
     if (chkBox.checked) 
     { 
      chkBox.checked = false; 
     } 
     else 
     { 
      chkBox.checked = true; 
     } 

     // only select one at a time. 
     } 
    </script> 
    </head> 

    <body> 
    <form id="myForm" name="myForm"> 
     <input type="checkbox" id="chkBox100" onClick="toggle(this);"> 
     <input type="checkbox" id="chkBox121" onClick="toggle(this);"> 
     <input type="checkbox" id="chkBox1180" onClick="toggle(this);"> 
    </form> 
    </body> 
</html>

출처

2011-12-15 Nomad

왜 라디오 버튼을 사용하지 않습니까? – gereeter

@gereeter에 동의합니다. 다른 옵션을 선택 해제하는 "없음"옵션을 추가 할 수 있습니다. –

또한 폼 컨트롤에는 이름 특성이 있어야하며, 그렇지 않으면 폼 컨트롤이 성공할 수 없으며 양식을 제출할 때 포함되지 않습니다. – RobG

라이브러리를 사용하지 않으면 다음을 수행 할 수 있다고 생각합니다. 올바르게 이해하면 작동하는 것 같습니다.

Fiddle

출처

2011-12-15 03:02:13 mreyeros

도움 주셔서 감사합니다. – Nomad

사실상 "선택 사항 없음"옵션 인 기본 체크 버튼으로 라디오 버튼 사용을 고려 했습니까? 자바 스크립트가 필요하지 않습니다.

<input type="radio" name="rb" value="zero">Zero 
<br> 
<input type="radio" name="rb" value="one">One 
<br> 
<input type="radio" name="rb" value="two">Two 
<br> 
<input type="radio" name="rb" value="None" checked>None of the above

출처

2011-12-15 02:55:10 RobG

도움과 시간을 보내 주셔서 감사합니다. – Nomad

나머지 코드를 선택 취소하는 코드는 누락 된 코드입니다. 이렇게하려면 먼저 모든 확인란의 목록을 가져와 모든 확인란의 선택을 취소해야합니다. 그런 다음 사용자가 클릭 한 것을 선택하십시오.

function toggle(chkBox) { 
    checkboxes = document.getElementById("myForm").childNodes; 
    var isChecked = chkBox.checked; //this just changed, so it really is whether the box wasn't checked beforehand. 
    for (var i = 0; i < checkboxes.length; i++) { 
     checkboxes[i].checked = false; //clear all of them 
    } 
    if (isChecked) { 
     chkBox.checked = true; //if the original one wasn't checked, check it 
    } 
}

이 일을하는 또 다른 방법은이 문제를 해결할 수 있지만 RobG 말한 것처럼 다른 옵션 "는 아무도 말을하지으로, 자동으로 세 번째를 당신이 할 첫 번째 두 가지 속성을 가지고 있지만, 이는 라디오 버튼을 사용하는 것입니다 . "

출처

2011-12-15 02:57:42 gereeter

확인란을 선택하고 클릭하지 않으면 isChecked가 false가되고 코드에서 다시 검사합니다 (즉, 확인란을 선택 취소 할 수 없음). 마지막 줄은 'chkBox.checked = isChecked;'여야합니다. 부수적으로, isChecked가 false이면 아무 것도 할 필요가 없습니다. – RobG

고맙습니다. 고침. – gereeter

javascript는 클릭시 선택 가능 확인란을 선택하고 한 번에 하나만 선택하십시오.

답변

관련 문제