У меня есть флажок с тем же классом, в основном это то, что, если я установил флажок, он будет проверен тот же класс, что и флажок, и он вернет значение. Но он не вернется напрямую, мне нужно где-то щелкнуть, а затем зарегистрироваться в текстовом поле. Что мне нужно, это прямое значение в текстовое поле, когда я установил флажок. Код таблицы взят из php, поэтому класс + номер изменится и не будет исправлен.

Ниже приведен фрагмент для этого.

function doSomethingElse(row) {
  //select all checkboxes with name userid that are checked
  var checkboxes =
    document.querySelectorAll("input[name='student_name[]']:checked")

  var values = "";

  //append values of each checkbox into a variable (seperated by commas)
  for (var i = 0; i < checkboxes.length; i++) {
    values += checkboxes[i]
      .value + ","
  }

  //remove last comma
  values = values.slice(0, values.length - 1)

  //set the value of input box
  document.getElementById("stud_name").value = values;

}


$("input:checkbox").change(function() {
  //alert('Ok!');
  var value = $(this).attr("class");
  $(":checkbox[class='" + value + "']").prop("checked", this.checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr onclick="doSomethingElse(this);">
    <td><input type="checkbox" class="something1" name="user_id[]" value='' /></td>
    <td><input type="checkbox" class="something1" name="student_name[]" value='1' /></td>
    <td><input type="checkbox" class="something2" name="student_name[]" value='' /></td>
    <td><input type="checkbox" class="something2" name="user_id[]" value='2' /></td>
  </tr>
</table>

<input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" />
0
KingJ 3 Май 2019 в 11:27

3 ответа

Лучший ответ

Попробуйте использовать $("input:checkbox").click(function () { вместо change

function doSomethingElse(row){

  //select all checkboxes with name userid that are checked
  var checkboxes = document.querySelectorAll("input[name='student_name[]']:checked")

  var values = "";

  //append values of each checkbox into a variable (seperated by commas)
  for(var i=0;i<checkboxes.length;i++){
    values += checkboxes[i].value + ","
  }

  //remove last comma
  values = values.slice(0,values.length-1);

  //set the value of input box
  document.getElementById("stud_name").value = values;

}

$("input:checkbox").click(function () {
  //alert('Ok!');
  var value = $(this).attr("class");
  $(":checkbox[class='" + value + "']").prop("checked", this.checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
 <tr onclick="doSomethingElse(this);">

    <td><input type="checkbox" class ="something1"name="user_id[]" value='ID1' /></td>
    <td><input type="checkbox" class ="something1"name="student_name[]" value='NAME1' /></td>
    <td><input type="checkbox" class ="something2"name="student_name[]" value='NAME2' /></td>
    <td><input type="checkbox" class ="something2"name="user_id[]" value='ID2' /></td>
  </tr>
</table>

<input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" />
2
Chaska 3 Май 2019 в 08:39

У меня есть рабочая скрипка над ней; https://jsfiddle.net/nd01p86t/15/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td><input type="checkbox" class="something1" name="user_id[]" value='' /></td>
    <td><input type="checkbox" class="something1" name="student_name[]" value='1' /> </td>
    <td><input type="checkbox" class="something2" name="student_name[]" value='' /> </td>
    <td><input type="checkbox" class="something2" name="user_id[]" value='2' /></td>
  </tr>
</table>

<input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" />

Функции ...

function doSomethingElse(row) {
  //select all checkboxes with name userid that are checked
  var checkboxes = document.querySelectorAll("input[name$='[]']:checked")
  // OR...
  //var checkboxes = document.querySelectorAll("input[type='checkbox']:checked")

  //append values of each checkbox into a variable (seperated by commas)

  var values = Array.from(checkboxes).filter( checkbox => checkbox.value ).map( checkbox => checkbox.value ).join(',');

  //set the value of input box
  document.getElementById("stud_name").value = values;
}

//  Attach to the table and delegate 'click' per row
$("table").delegate("tr", "click", doSomethingElse);


$("input:checkbox").click(function() {
  //alert('Ok!');
  var value = $(this).attr("class");
  $(":checkbox[class='" + value + "']").prop("checked", this.checked);
})
1
user11335688user11335688 3 Май 2019 в 09:20

Трудно понять, чего именно вы хотите от своего вопроса, но я попробовал.

Во-первых, есть ли ошибка в вашем HTML? Если ниже:

    <td><input type="checkbox" class="something2" name="student_name[]" value='' /></td>
    <td><input type="checkbox" class="something2" name="user_id[]" value='2' /></td>

На самом деле быть:

    <td><input type="checkbox" class="something2" name="student_name[]" value='2' /></td>
    <td><input type="checkbox" class="something2" name="user_id[]" value='' /></td>

Обратите внимание, что значения поменялись местами.

Я думаю, что для решения вашей проблемы вы можете сделать всю работу в onchange, как показано ниже:

$("input:checkbox").change(function () {
  //alert('Ok!');
  var value = $(this).attr("class");
  $(":checkbox[class='" + value + "']").prop("checked", this.checked);
  
  var checkboxes = $("input[name='student_name[]']:checked");
  var values = "";

  //append values of each checkbox into a variable (seperated by commas)
  for(var i=0;i<checkboxes.length;i++) {
    values += checkboxes[i].value + ","
  }

  //remove last comma
  values = values.slice(0,values.length-1)

  //set the value of input box
  $("#stud_name").val(values);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr>

      <td><input type="checkbox" class ="something1"name="user_id[]" value='' /></td>
      <td><input type="checkbox" class ="something1"name="student_name[]" value='1' /></td>
      <td><input type="checkbox" class ="something2"name="student_name[]" value='2' /></td>
      <td><input type="checkbox" class ="something2"name="user_id[]" value='' /></td>
    </tr>
 </table>

 <input class="form-control" name="stud_name" id="stud_name" type="text" maxlength="255" />

Я также попытался немного улучшить ваше форматирование и использовал только селекторы jquery.

1
dbramwell 3 Май 2019 в 09:51