How to make checkbox checked according to a value in Jquery

Question

I need to make checked status of my checkbox according to a data value. Up to now I am using below method.

$(document).ready(function(){  
      $('#add').click(function(){  
           $('#insert').val("Insert");  
           $('#update_form')[0].reset();  
      });  
      $(document).on('click', '.update_data', function(){ 
           var row_id = $(this).attr("id");  
           
           $.ajax({  
                url:"./project/userdetail.php",  
                method:"POST",  
                data:{row_id:row_id},  
                dataType:"json", 
                success:function(data){  
                      ...........
                     if(data.accesslocations=='ABC,DEF,GHI'){
                      document.getElementById("check1").checked = true;
                      document.getElementById("check2").checked = true;
                      document.getElementById("check3").checked = true;
                      
                     }

                     if(data.accesslocations=='ABC,GHI'){
                      document.getElementById("check1").checked = true;
                      document.getElementById("check3").checked = true;
                      
                     }
                     if(data.accesslocations=='ABC'){
                      document.getElementById("check1").checked = true;
                     }

                    
                     
                     
                     ...........

                 $('#employee_id_update').val(data.row_id);  
                 $('#insert').val("Update");
                 $('#new_data_Modal').modal('show'); 
                        
                      
                }, 
                error: function(req, status, error) {
               alert(req.responseText);      
                }   
           });  
      });

My intention is to check the data.accesslocations and check whether it contains ABC or ABC,DEF likewise,

If ABC contains need to check1 status as checked.
If DEF contains need to check2 status as checked.
If GHI contains need to check3 status as checked.

I have tried below method as well. But then I could not open my dialogbox, new_data_Modal.

               if(strstr(data.accesslocations, "ABC")){
                  document.getElementById("check1").checked = true;
                 }

*"But then I could not open my dialogbox"* has some certain level of secrecy to it... — Roko C. Buljan, Jun 12 '22 at 12:44
`data.accesslocations=='ABC,DEF,GHI'` I highly suspect that's your output, a silly string containing comma separate words... Is that really the case? Or you have an Array instead? — Roko C. Buljan, Jun 12 '22 at 12:45
@RokoC.Buljan yes, you are correct. It is a string, not an array — Codec737, Jun 12 '22 at 12:47
Ah, OK if I got you right your modal opens just fine unless you use the last piece of code you've shown. So yeah... All I can think of is that you're missing to trigger a `.change()` event. — Roko C. Buljan, Jun 12 '22 at 13:31

score 0 · Answer 1 · answered Jun 12 '22 at 13:42

0

Create an Array out of your string "GHI,ABC" → ["ABC", "GHI"] using String.prototype.split()
After you have you array, go for your elements values using Array.prototype.includes()

const handleFoobarCheckboxes = (str) => {
  const values = str.split(",");
  document.querySelectorAll('[name="foobar[]"]').forEach(elCkb => {
    elCkb.checked = values.includes(elCkb.value);
  });
};

handleFoobarCheckboxes("GHI,ABC");

<label><input name="foobar[]" type="checkbox" value="ABC"> ABC</label>
<label><input name="foobar[]" type="checkbox" value="DEF"> DEF</label>
<label><input name="foobar[]" type="checkbox" value="GHI"> GHI</label>

as you can see from the example above, the order of values will not matter and your script will still work.

answered Jun 12 '22 at 13:42

Roko C. Buljan

196,159
39
305
313

Thanks! How should I use this inside a if function?Can I use if(handleFoobarCheckboxes(ABC")) { my code } ? – Codec737 Jun 12 '22 at 14:00
No. That function already checkes and uncheckes the inputs as you can see in the demo. – Roko C. Buljan Jun 12 '22 at 14:21
Thank! got it. But I dont need to check after hardcoding the string. All I need to check the string data.accesslocations and check first checkbox if it contains ABC. need to check both first and two if contains ABC,DEF. Likewise. Hope you got that. If not I could elaborate more in question as well. – Codec737 Jun 12 '22 at 14:25
Well, I used a harrdcoded string for demo purpose obviously. Instead of my hardcoded string you would use `data.accesslocations` like: `handleFoobarCheckboxes(data.accesslocations)`- no difference. The script will work the same. – Roko C. Buljan Jun 22 '22 at 07:29

How to make checkbox checked according to a value in Jquery

1 Answers1