Checked checkbox using array response in JavaScript

Question

I have a form and it has 4 checkboxes. I am getting a response from the server and according to that response I need to checked that particular checkbox/s.

For example I have four checkboxes called 2100,2200,2300,2400

Then I am getting a array response from the server and array has 2200 and 2400. Then I need to checked both 2200 and 2400 checkboxes.

$.ajax({
    type: "POST",
    url: "send_db.php",
    data: {'send_array':array_send},
    success:  function(data){

    var jsonRes  = jQuery.parseJSON(data);
    var plant  = jsonRes.plant;
    var array_length = jsonRes.plant.length;

    for (var i = 0; i < array_length; i++) {

        document.getElementsByName("user_plant1").checked = true;

    }

    }
});

Here plant has the values.

These are my checkboxes...

<div class="form-group">
    <label class="checkbox-inline"><input type="checkbox" id="chk21" name="user_plant1" value="2100">2100</label>
    <label class="checkbox-inline"><input type="checkbox" id="chk22" name="user_plant1" value="2200">2200</label>
    <label class="checkbox-inline"><input type="checkbox" id="chk23" name="user_plant1" value="2300">2300</label>
    <label class="checkbox-inline"><input type="checkbox" id="chk24" name="user_plant1" value="2400">2400</label>
</div>

getElementsByName(); returns a node list - collection/group of elements. — NewToJS
– NewToJS, Commented Dec 8, 2017 at 10:50

Mamun · Accepted Answer · 2017-12-08 11:48:31Z

3

Try the following way:

var chkData = "2200,2400";
chkData = chkData.split(',');

var el=document.querySelectorAll('input[name=user_plant1]');
el.forEach(function(chk){
  if(chkData.includes(chk.value)){
    chk.setAttribute('checked',true);
  }
  else{
    chk.checked = false;
  }
});

<div class="form-group">
    <label class="checkbox-inline"><input type="checkbox" id="chk21" name="user_plant1" value="2100">2100</label>
    <label class="checkbox-inline"><input type="checkbox" id="chk22" name="user_plant1" value="2200">2200</label>
    <label class="checkbox-inline"><input type="checkbox" id="chk23" name="user_plant1" value="2300">2300</label>
    <label class="checkbox-inline"><input type="checkbox" id="chk24" name="user_plant1" value="2400">2400</label>
</div>

edited Dec 8, 2017 at 11:48

answered Dec 8, 2017 at 10:52

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

D.Madu Over a year ago

u saved my day, works really fine. I changed 'input[type=checkbox]' to "input[name='user_plant1']" for my need. thank you

Mamun Over a year ago

@D.Madu, you are most welcome. I have updated the answer as well.....thanks

D.Madu Over a year ago

one another thing. if i checked 4 checkboxes from first response and again take a response with two checkboxes, other two not unchecked. I tried with if(chkData.includes(chk.value)){ chk.setAttribute('checked',true); }else{ chk.setAttribute('checked',false); } and try to flase all checkboxes at the top like this. document.getElementById("chk21").checked = false; document.getElementById("chk22").checked = false; document.getElementById("chk23").checked = false; document.getElementById("chk24").checked = false; both not working

Mamun Over a year ago

Do you want to set the other check boxes unchecked on the second response?

D.Madu Over a year ago

yes. for example first time 2100,2200,2300,2400 come and checked all boxes, second time only come 2100,2200. but 2300 and 2400 also checked. I want to unchecked them

Collectives™ on Stack Overflow

Checked checkbox using array response in JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related