Question

我有一个包含某些值的文本字段：

 <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" />

*请注意，我在php中运行了此复选框，这就是为什么它包含数组的[]。

我希望复选框检查文本字段内是否有值61。我希望它是动态的，因为它来自数据库，因为值可以更改并且不是固定的。我该怎么办？

预先感谢

Answer 1

您必须遍历输入，然后检查条件：

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

您可以尝试这样的事情

 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" />

普通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

在文本字段中添加change侦听器。它应该遍历复选框，根据其值是否与输入相匹配来选中或取消选中它们。

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" />

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

3 个答案: