当文本字段中有特定值时如何检查复选框

Question

I have a textfield which contains certain value:

 <input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/>

this is the input checkbox

<input type="checkbox"   name="user_id[] value="61" />
<input type="checkbox"   name="user_id[] value="62" />
<input type="checkbox"   name="user_id[] value="63" />

*note i run this checkbox in php thats why it contains the [] for array.

I want the checkbox to checked if there is a value of 61 inside the textfield. I want it to be dynamic because it is from database, because value can be change and it is not fixed. How do i do this?

thanks in advance

Answer 1

You have to iterate over the inputs and then check the condition:

 document.querySelectorAll("input").forEach(function(i) { if (i.value.indexOf("61") > -1) { i.checked = true; } }); 

 <input type="checkbox" name="user_id[]" value=" 61 " /> <input type="checkbox" name="user_id[]" value="62" /> <input type="checkbox" name="user_id[]" value=" 63" /> 

Answer 2

You can try something like this

  let ids = $('#studID').val().split(','); ids.forEach(function(id) { $('input[type="checkbox"][value="'+id+'"]').prop('checked',true); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/> <input type="checkbox" name="user_id[]" value="61" /> <input type="checkbox" name="user_id[]" value="62" /> <input type="checkbox" name="user_id[]" value="63" /> <input type="checkbox" name="user_id[]" value="66" /> <input type="checkbox" name="user_id[]" value="67" /> <input type="checkbox" name="user_id[]" value="68" /> 

  let ids = $('#studID').val().split(','); ids.forEach(function(id) { $('input[type="checkbox"][value="'+id+'"]').prop('checked',true); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/> <input type="checkbox" name="user_id[]" value="61" /> <input type="checkbox" name="user_id[]" value="62" /> <input type="checkbox" name="user_id[]" value="63" /> <input type="checkbox" name="user_id[]" value="66" /> <input type="checkbox" name="user_id[]" value="67" /> <input type="checkbox" name="user_id[]" value="68" /> 

plain javascript

 let ids = document.querySelector("#studID").value.split(','); ids.forEach(function(id) { var checkbox = document.querySelector("input[name='user_id[]'][value='"+id+"']"); if(checkbox) { checkbox.checked = true; } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64"/> <input type="checkbox" name="user_id[]" value="61" /> <input type="checkbox" name="user_id[]" value="62" /> <input type="checkbox" name="user_id[]" value="63" /> <input type="checkbox" name="user_id[]" value="66" /> <input type="checkbox" name="user_id[]" value="67" /> <input type="checkbox" name="user_id[]" value="68" /> 

Answer 3

Add a change listener to the text field. It should loop through the checkboxes, either checking or unchecking them depending on whether their values match the input.

 document.querySelector("#studID").addEventListener("change", function() { var values = this.value.split(","); var checkboxes = document.querySelectorAll(`input[name='user_id[]']`); checkboxes.forEach(cb => cb.checked = values.includes(cb.value)); }); 

 <input class="form-control" name="user_id" id="studID" type="text" maxlength="255" value="61,62,63,64" /> <br> <input type="checkbox" name="user_id[]" value="61" /> <input type="checkbox" name="user_id[]" value="62" /> <input type="checkbox" name="user_id[]" value="63" />