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

时间:2018-10-24 21:42:35

标签: javascript jquery

当复选框的值类似于数组中的值时,我正在尝试将set复选框设置为true。

以下是我的javascript:

import numpy as np
import matplotlib.pyplot as plt

y = np.random.uniform(-1,1,size=100)
x = np.arange(0,100)
pos = y[y>=0]
neg = y[y<0]


fig = plt.figure()
ax = fig.add_subplot(1,1,1)
ax.plot(x[y>=0],pos, 'rs')
ax.plot(x[y<0],neg, 'bo')

我认为问题出在这部分:

 $(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设置为静态数字(即[value = 2])时,则可以使用。

但是,当我尝试仅将值设置为数组searcharray [i]时,我就将其破坏了。

2 个答案:

答案 0 :(得分:3)

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

$(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>

答案 1 :(得分:1)

您可以使用JQuery选择器和过滤器进行迭代,以简化代码。

var searcharray = ['2','3'];
$(document).on('click', '#applyallbtn', function () {
 	$('#apply_all input[type=checkbox]')
  	.filter(function() { return searcharray.indexOf($(this).val()) > -1; })
  	.prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="apply_all">
<tr>
  <td><input type="checkbox" value="1" /></td>
  <td>Row 1</td>
</tr>
<tr>
  <td><input type="checkbox" value="2" /></td>
  <td>Row 2</td>
</tr>
<tr>
  <td><input type="checkbox" value="3" /></td>
  <td>Row 3</td>
</tr>
</table>
<button id="applyallbtn">
Apply all
</button>

这是JSFiddle:https://jsfiddle.net/upn19feb/