CODEWITHSUNDEEP
jquery
Roi
Roi

Reputation: 153

Checkboxthat check number of checkboxs

I added checkbox (class="checkAllBtn") that checked all the checkboxs in the page.

this checkbox is inside element with class "checkAllBox"

I would like to change it so it will mark/check only the checkboxs inside the table (or div) "checkAllBox" that "checkAllBtn" is in ( i have number of "checkAllBox" in the page)

$(function() {
  var chkMain = $('.checkAllBox input:checkbox.checkAllBtn');
  $(chkMain).change(function() {
    $('.checkAllBox input:checkbox').not(this).prop('checked', this.checked);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-striped table-hover checkAllBox">
    <thead>
      <tr>
        <th>
          <div class="checkbox checkbox-info">
            <input id="checkbox1" type="checkbox" class="checkAllBtn" checked>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox checkbox-info">
            <input id="checkbox200" type="checkbox" checked>
            <label for="checkbox200"></label>
          </div>
        </td>
        <td>
          <div class="checkbox checkbox-info">
            <input id="checkbox200" type="checkbox" checked>
            <label for="checkbox200"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Views: 36

Answers (2)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

If you just want to affect the elements inside the table that contains the "check all" checkbox, then you can use jQuery to find the parent table element and only affect checkboxes inside that...

$(".check-all").on("click", function() {
  $(this)
    .closest("table")               // find the nearest parent table
    .find("input[type=checkbox]")   // find all the checkboxes
    .not(this)                      // but not this one
    .attr("checked", this.checked); // set the checked state of them all
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h3>Table 1</h3>
<table>
    <tr><td><input type="checkbox" class="check-all"/> Check/uncheck all in this table</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
</table>
<h3>Table 2</h3>
<table>
    <tr><td><input type="checkbox" class="check-all"/> Check/uncheck all in this table</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
    <tr><td><input type="checkbox"> Just another checkbox</td></tr>
</table>

Upvotes: 0

Mark Baijens
Mark Baijens

Reputation: 13222

The selector of your check all checkbox was wrong so there was no event handler attached.

I changed input:checkbox.checkAllBtn into input.checkAllBtn:checkbox Also as pointed out by Tyler there is no need to wrap an element in jQuery twice. Therefore i removed the 2nd jQuery wrapper and changed the variable name to start with a $ to indicate there is a jQuery object in the variable.

$(function() {
  var $chkMain = $('.checkAllBox input.checkAllBtn:checkbox');
  $chkMain.change(function() {
    $('.checkAllBox input:checkbox').not(this).prop('checked', this.checked);
  });
});
table,
tr,
td,
p{
  padding: 0px;
  margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
  <table class="table table-striped table-hover checkAllBox">
    <thead>
      <tr>
        <th>
          <div class="checkbox checkbox-info">
            <p>all</p>
            <input id="checkbox1" type="checkbox" class="checkAllBtn" checked>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="checkbox checkbox-info">
            <p>check this</p>
            <input id="checkbox200" type="checkbox" checked>
            <label for="checkbox200"></label>
          </div>
        </td>
        <td>
          <div class="checkbox checkbox-info">
            <p>check this</p>
            <input id="checkbox300" type="checkbox" checked>
            <label for="checkbox300"></label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <p>This will not be checked</p>
    <input id="checkbox400" type="checkbox" checked>
    <label for="checkbox400"></label>
  </div>
</div>

Upvotes: 2

Related Questions