У меня есть текстовое поле, которое содержит определенное значение:

 <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 внутри текстового поля. Я хочу, чтобы он был динамическим, потому что он из базы данных, потому что значение может быть изменено, и оно не является фиксированным. Как мне это сделать?

Заранее спасибо

0
KingJ 2 Май 2019 в 10:32

3 ответа

Лучший ответ

Вы можете попробовать что-то вроде этого

 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" />
1
madalinivascu 2 Май 2019 в 07:49

Вы должны перебрать входные данные и затем проверить условие:

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" />
1
Barmar 2 Май 2019 в 07:40

Добавьте слушателя 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" />
1
Barmar 2 Май 2019 в 07:44