how to select the checkboxes automatically as per the values in an array?

Question

I have some checkboxes like this in my form...

<label><input type="checkbox" name="project_dept[]" id="project_dept1" value="1">Development</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept2" value="2">Designing</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept3" value="3">Testing</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept4" value="4">Finance</label>

Now, in javascript I have a string in a format of comma separated values like,

var projDepts = "1,2,3,4";

after using the split function of javascript i have converted it to an array.

Now, my question is I want to select all those checkboxes as per the values in the array. I have tried something but its not working for me,

var projDepts = "1,2,3,4";
var projDeptArray = projDepts.split(',');
var project_depts = document.getElementsByName("prdept[]");
for (var i = 0; i < projDeptArray.length; i++) {
  for (var j = 0; j < project_depts.length; j++) {
    if (projDeptArray[i] == project_depts[j]) {
      $(project_depts[i]).prop("checked", true)
    }
  }
}

This code is not working and none of the checkboxes got checked, I know I am getting somewhere wrong. Please someone help me to a solution for this.

you have the wrong element name. var project_depts = document.getElementsByName("project_dept[]") — ADoorMarkedPirate
– ADoorMarkedPirate, Commented Dec 7, 2017 at 14:05
@ochhii - I have rectified that but still no solution for the same. — Snehasis
– Snehasis, Commented Dec 8, 2017 at 6:17

Rahul · Accepted Answer · 2017-12-08 09:04:40Z

4

You can split your string by comma and you can traverse your array to check if element with that id exists and make checked property of that checkbox to true.

var projDepts = "1,3,4";
var arr = projDepts.split(",");
for(i = 0; i < arr.length; i++){
   if($("#project_dept"+arr[i]).length > 0){
      $("#project_dept"+arr[i]).attr("checked", true);
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label> <input type="checkbox" name="project_dept[]" id="project_dept1" value="1">Development</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept2" value="2">Designing</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept3" value="3">Testing</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept4" value="4">Finance</label>

EDIT

Here is working code,

    <?php 
    $all_dept_names = [
        ["team_id" => "1",
        "team_name" => "Team 1"
        ],
        ["team_id" => "2",
        "team_name" => "Team 2"
        ],
        ["team_id" => "3",
        "team_name" => "Team 3"
        ],
        ["team_id" => "4",
        "team_name" => "Team 4"
        ],
    ];
    array_walk($all_dept_names, function($item, $key) use (&$all_dept_names){

        $all_dept_names[$key] = (object)$item;
    });

    ?>
<?php foreach ($all_dept_names as $dept_names) {

    ?>
    <label class="checkbox-inline i-checks">
        <input type="checkbox" name="prdept[]" id="prdept<?php echo $dept_names->team_id; ?>" value="<?php echo $dept_names->team_id; ?>" class="form-control required"> <?php echo $dept_names->team_name; ?> 
    </label>
<?php }?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    var projDept = "1,2,3"; 
    var projDeptArray = projDept.split(',');    
    for(i = 0; i < projDeptArray.length; i++){ 
        if($("#prdept"+projDeptArray[i]).length > 0){ 
            $("#prdept"+projDeptArray[i]).attr("checked", true); 
        }
    }
</script>

Check this code in link. Its working, else there is some issue in your code.

edited Dec 8, 2017 at 9:04

answered Dec 7, 2017 at 14:06

Rahul

18.6k7 gold badges43 silver badges64 bronze badges

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

4 Comments

Snehasis Over a year ago

I have done the same thing but still its not working and none of the checkboxes are getting selected. MY HTML WITH PHP CODE : <?php foreach($all_dept_names as $dept_names){ ?> <label class="checkbox-inline i-checks"> <input type="checkbox" name="prdept[]" id="prdept<?php echo $dept_names->team_id; ?>" value="<?php echo $dept_names->team_id; ?>" class="form-control required"> <?php echo $dept_names->team_name; ?> </label> <?php } ?>

Snehasis Over a year ago

THIS IS MY JAVASCRIPT CODE : var projDept = "1,2,3"; var projDeptArray = projDept.split(','); for(i = 0; i < projDeptArray.length; i++){ if($("#prdept"+projDeptArray[i]).length > 0){ $("#prdept"+projDeptArray[i]).attr("checked", true); } }

Snehasis Over a year ago

$("#prdept"+projDeptArray[i]).attr("checked", true); This line is not working as it is not selecting any checkboxes as I have checked the alert function is working fine inside if-statement as it is alerting 3 times as we have three values in the array. So the problem is in the next line which we are using to check the checkboxes. Please help what to do now I am really got strucked in this wasted my all day.

Snehasis Over a year ago

It works like a charm now.. thanks mate for the kind help !

charlietfl · Accepted Answer · 2017-12-07 14:26:50Z

Map that split string to id selectors and pass to jQuery as a one liner

var projDepts = "1,3,4";
var checkboxSelectors = projDepts.split(",").map(s => '#project_dept' +s).join() ;  
$(checkboxSelectors).prop('checked', true);

console.log(checkboxSelectors )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label> <input type="checkbox" name="project_dept[]" id="project_dept1" value="1">Development</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept2" value="2">Designing</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept3" value="3">Testing</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept4" value="4">Finance</label>

Or another way using prop(propertyName, function)

var projDepts = "1,3,4",
  projDeptArray = projDepts.split(',');

$(':checkbox[name="project_dept[]"]').prop('checked', function() {
  return projDeptArray.includes(this.value)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label> <input type="checkbox" name="project_dept[]" id="project_dept1" value="1">Development</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept2" value="2">Designing</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept3" value="3">Testing</label>
<label> <input type="checkbox" name="project_dept[]" id="project_dept4" value="4">Finance</label>

alexP · Accepted Answer · 2017-12-08 07:13:12Z

0

var projDepts = "1,2,3,4";
var aProjDepts = projDepts.split(",");
var el;

for (var key in aProjDepts) { //Loops through Array
  /*
  Get element where name starts with "project_dept" and value is equal the 
  current array value in loop
  */      
  el = document.querySelectorAll("[name^=project_dept][value='" + aProjDepts[key] + "']")[0]; 
  if (el) { //if this element exists...
    el.setAttribute("checked", true); //...set the checkbox true
  }
}

edited Dec 8, 2017 at 7:13

answered Dec 7, 2017 at 14:24

alexP

3,7657 gold badges29 silver badges37 bronze badges

1 Comment

Aniruddha Das Over a year ago

adding little desc helps new or starting programmers, if you can add little desc.

Collectives™ on Stack Overflow

how to select the checkboxes automatically as per the values in an array?

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related