javascript - 遍历数组以将相同的值应用于其他复选框

Question

当复选框的值与数组中的值相似时，我尝试将 set checkboxes 应用为 true。

下面是我的javascript:

 $(document).on('click', '#applyallbtn', function () {
    var searcharray = $("#apply_all").children("input:checked");
    for (var i = 0; i < searcharray.length; i++) {
        $('tr input[type=checkbox][value=searcharray[i]]').prop('checked', true);
        }
  });

我认为问题出在这部分:

[value=searcharray[i]]

当我将 value 设置为静态数字(即 [value=2])时，这就起作用了。

但是，当我尝试将值设置为数组 searcharray[i] 时，我破坏了它。

Answer 1

就我个人而言，我会稍微改变一下您的逻辑。根据值评估元素，而不是按值查找它们。

$(document).on('click', '#applyallbtn', function() {
  //to get an actual array of the values, you have to map them, and get the array
  var searcharray = $("#apply_all").children("input:checked").map(function(){
    return this.value;
  }).get();

  $('tr :checkbox').filter(function() {
    //if the value of the checkbox is in the array, it should be checked
    return searcharray.indexOf(this.value) > -1;
  }).prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="apply_all">
  <B>Click the below to apply to all boxes in the table</B>
  <BR>
  <input type="checkbox" name="apply_all" value="1">Pet 1
  <BR>
  <input type="checkbox" name="apply_all" value="2">Pet 2
  <BR>
  <input type="checkbox" name="apply_all" value="3">Pet 3
  <BR>
  <input type="checkbox" name="apply_all" value="4">Pet 4
  <BR>
  <input type="checkbox" name="apply_all" value="5">Pet 5
  <BR>
  <input type="checkbox" name="apply_all" value="6">Pet 6
  <BR>
  <input type="checkbox" name="apply_all" value="7">Pet 7
  <BR>
  <input type="checkbox" name="apply_all" value="8">Pet 8
  <BR>
  <button type="button" id="applyallbtn">Add Row</button>
</div>

<BR>
<BR>
<BR> Table of values
<BR>


<table>
  <tr>
    <td>
      Location 1
      <BR>
      <input type="checkbox" value="1">Pet 1
      <BR>
      <input type="checkbox" value="2">Pet 2
      <BR>
      <input type="checkbox" value="3">Pet 3
      <BR>
      <input type="checkbox" value="4">Pet 4
      <BR>
      <input type="checkbox" value="5">Pet 5
      <BR>
      <input type="checkbox" value="6">Pet 6
      <BR>
      <input type="checkbox" value="7">Pet 7
      <BR>
      <input type="checkbox" value="8">Pet 8
      <BR>
    </td>
  </tr>
  <tr>
    <td>
      Location 2
      <BR>
      <input type="checkbox" value="1">Pet 1
      <BR>
      <input type="checkbox" value="2">Pet 2
      <BR>
      <input type="checkbox" value="3">Pet 3
      <BR>
      <input type="checkbox" value="4">Pet 4
      <BR>
      <input type="checkbox" value="5">Pet 5
      <BR>
      <input type="checkbox" value="6">Pet 6
      <BR>
      <input type="checkbox" value="7">Pet 7
      <BR>
      <input type="checkbox" value="8">Pet 8
      <BR>
    </td>
  </tr>
  <tr>
    <td>
      Location 3
      <BR>
      <input type="checkbox" value="1">Pet 1
      <BR>
      <input type="checkbox" value="2">Pet 2
      <BR>
      <input type="checkbox" value="3">Pet 3
      <BR>
      <input type="checkbox" value="4">Pet 4
      <BR>
      <input type="checkbox" value="5">Pet 5
      <BR>
      <input type="checkbox" value="6">Pet 6
      <BR>
      <input type="checkbox" value="7">Pet 7
      <BR>
      <input type="checkbox" value="8">Pet 8
      <BR>
    </td>
  </tr>
</table>