Loop checkboxes javascript

Question

I'm trying to loop to authorize only one checkbox to be checked for every question I ask.

I've got several questions on my 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>

Etc... for div id="divchk_2",div id="divchk_3", etc...

The problem is that the loops are not working, it's only working for the first div. Thank you

Surely this is what radio buttons are made for, why not just use them instead? — musefan
– musefan, Commented Feb 1, 2018 at 13:41
I wrote "if (nbcochee>1)" for the example but I want to code it for any other number, the user who's creating the question will specify how max answers he wants — user9007028
– user9007028, Commented Feb 1, 2018 at 13:47
@user9007028: Provide a jsfiddle of your code working as it currently does, and I will fix it for you — musefan
– musefan, Commented Feb 1, 2018 at 13:52
@musefan jsfiddle.net/p6jk81pn I don't know how but when i try it on my browser it works for the first div but not in Jsfiddle — user9007028
– user9007028, Commented Feb 1, 2018 at 14:03

Titus · Accepted Answer · 2018-02-01 13:58:30Z

You can use something like this:

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>

In this example, instead of unchecking the checkbox if there are more then one checkboxes checked in that element, I simply prevent the default behaviour of the click event (e.preventDefault();).

Also, instead of verifying all the checkbox wrappers at each click, I'm only verifying the parent of the clicked element.

Bhavesh Shah · Accepted Answer · 2018-02-01 13:50:41Z

0

Hi rather then using ID to loop and increment it programatically use class instead that will give you an array of all the div which you can loop through.

Add the same class to all the div you want to loop. And yeah you should use Radio buttons instead of Checkbox if you want only one value to be selected.

Example :

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

answered Feb 1, 2018 at 13:50

Bhavesh Shah

491 silver badge7 bronze badges

Collectives™ on Stack Overflow

Loop checkboxes javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related