Question

我试图循环授权只针对我提出的每个问题检查一个复选框。

我的html上有几个问题

＆＃13;

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;
        }
    }
   }
 }
}

＆＃13;

<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>

＆＃13;

等...对于div id =＆＃34; divchk_2＆＃34;，div id =＆＃34; divchk_3＆＃34;等...

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

Answer 1

您可以使用以下内容：

＆＃13;

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();
  }
}

＆＃13;

<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>

＆＃13;

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

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

Answer 2

嗨，然后使用ID循环并以编程方式递增它，而不是使用类，它将为您提供一个可以循环遍历的所有div的数组。

将相同的类添加到要循环的所有div中。是的，如果你只想选择一个值，你应该使用单选按钮而不是Checkbox。

示例：

var x = document.getElementsByClassName("example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

循环复选框javascript

2 个答案: