CODEWITHSUNDEEP
javascriptjquery
user749798
user749798

Reputation: 5370

Loop through array to apply same value to other checkboxes

I'm trying to apply set checkboxes to true when the the checkbox has a value that is similar to the value in an array.

Below is my 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);
        }
  });

I think the issue is this part:

[value=searcharray[i]]

When I set value to a static number (i.e., [value=2]), then this works.

However, when I try to just set value to the array searcharray[i], I'm breaking it.

Upvotes: 1

Views: 44

Answers (2)

Taplar
Taplar

Reputation: 24965

Personally I would switch up your logic a bit. Evaluate the elements against the values, rather than looking them up by value.

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

Upvotes: 3

Jason W
Jason W

Reputation: 13179

You could use the JQuery selector and filter to iterate for you to simplify your code.

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>

Here is JSFiddle: https://jsfiddle.net/upn19feb/

Upvotes: 1

Related Questions