javascript - 循环复选框 javascript

Question

我正在尝试循环授权仅对我提出的每一个问题检查一个复选框。

我的 html 有几个问题

function verifChk(id){
 var i,j;
 for (i=0;i<4;i++) {
 nbchk = document.getElementById('divchk_'+i).getElementsByTagName('input').length;
 var nbcochee = 0;
 for(j=0;j<=nbchk;j++){
    if(document.getElementById('nom_'+i+'_'+j).checked==true){
    nbcochee++;
        if(nbcochee>1){
        alert('Vous ne pouvez pas en choisir plus de une.');
        document.getElementById(id).checked = false;
        }
    }
   }
 }
}

<div id="divchk_0">
    <input name="nom_0_0" id="nom_0_0" value="148" type="checkbox" onclick="verifChk('nom_0_0')"> 
    <label for="poll_nom_a">a</label> 148
    <br>

    <input name="nom_0_1" id="nom_0_1" value="149" type="checkbox" onclick="verifChk('nom_0_1')"> 
    <label for="poll_nom_b">b</label> 149
    <br>

    <input name="nom_0_2" id="nom_0_2" value="150" type="checkbox" onclick="verifChk('nom_0_2')"> 
    <label for="poll_nom_c">c</label> 150
    <br>

    <input name="nom_0_3" id="nom_0_3" value="151" type="checkbox" onclick="verifChk('nom_0_3')"> 
    <label for="poll_nom_d">d</label> 151
    <br>
</div>

 <div id="divchk_1">
    <input name="nom_1_0" id="nom_1_0" value="152" type="checkbox"onclick="verifChk('nom_1_0')"> 
    <label for="poll_nom_e">e</label> 152
    <br>
    <input name="nom_1_1" id="nom_1_1" value="153" type="checkbox" onclick="verifChk('nom_1_1')"> 
    <label for="poll_nom_f">f</label> 153
    <br>
    <input name="nom_1_2" id="nom_1_2" value="154" type="checkbox" onclick="verifChk('nom_1_2')"> 
    <label for="poll_nom_g">g</label> 154
    <br>
    <input name="nom_1_3" id="nom_1_3" value="155" type="checkbox" onclick="verifChk('nom_1_3')"> 
    <label for="poll_nom_h">h</label> 155
    <br>
</div>

等等......对于div id =“divchk_2”，div id =“divchk_3”等......

问题是循环不起作用，它只适用于第一个 div。谢谢

Answer 1

你可以使用这样的东西:

function verifChk(e){
  var totalChecked = e.target.parentNode.querySelectorAll("input:checked").length;
  if(totalChecked > 1){
    console.log("Vous ne pouvez pas en choisir plus de une.");
    e.preventDefault();
  }
}

<div id="divchk_0">
    <input name="nom_0_0" id="nom_0_0" value="148" type="checkbox" onclick="verifChk(event)"> 
    <label for="poll_nom_a">a</label> 148
    <br>

    <input name="nom_0_1" id="nom_0_1" value="149" type="checkbox" onclick="verifChk(event)"> 
    <label for="poll_nom_b">b</label> 149
    <br>

    <input name="nom_0_2" id="nom_0_2" value="150" type="checkbox" onclick="verifChk(event)"> 
    <label for="poll_nom_c">c</label> 150
    <br>

    <input name="nom_0_3" id="nom_0_3" value="151" type="checkbox" onclick="verifChk(event)"> 
    <label for="poll_nom_d">d</label> 151
    <br>
</div>

 <div id="divchk_1">
    <input name="nom_1_0" id="nom_1_0" value="152" type="checkbox"onclick="verifChk(event)"> 
    <label for="poll_nom_e">e</label> 152
    <br>
    <input name="nom_1_1" id="nom_1_1" value="153" type="checkbox" onclick="verifChk(event)"> 
    <label for="poll_nom_f">f</label> 153
    <br>
    <input name="nom_1_2" id="nom_1_2" value="154" type="checkbox" onclick="verifChk(event)"> 
    <label for="poll_nom_g">g</label> 154
    <br>
    <input name="nom_1_3" id="nom_1_3" value="155" type="checkbox" onclick="verifChk(event)"> 
    <label for="poll_nom_h">h</label> 155
    <br>
</div>

在此示例中，如果该元素中选中了多个复选框，我不会取消选中该复选框，而是简单地阻止点击事件的默认行为 (e.preventDefault();)。

此外，我只是验证被单击元素的父元素，而不是在每次单击时验证所有复选框包装器。