Issue

This Content is from Stack Overflow. Question asked by Shazia Tasneem

I want to check the limited checkboxes on single click using jquery or javascript. for example if we have 5 checkboxes but on clicking select 3 it should select only 3 checkboxes out of 5 automatically.

Solution

This is what you are looking for:

let items = $("input[name=chkBox]");

      $("#selectAllChkBox").change(function (e) {
        if ($("#selectAllChkBox").is(':checked')) {
          for (let i = 0; i < 3; i++) {
            $(items[i]).prop('checked', true);
          }
        } else {
          $("input[name=chkBox]").prop('checked', false);
        }
      });

      $(items).change(function (e) {
        let current_item = e.target;

        let checked_items = $("input[name=chkBox]:checked");
        if (checked_items.length > 3) {
          alert('You can only select three items!');
          $(this).prop('checked', false);
        }
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="example" class="table table-striped table-bordered table-hover table-responsive display" width="100%" cellspacing="0">
      <thead>
        <tr>
          <th>Animal</th>
          <th class="vertalign">Select 3 <input type="checkbox" class="checkbox-inline" name="selectAllChkBox" id="selectAllChkBox">
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Cat</td>
          <td class="vertalign" rowspan="5"><input class="checkbox-inline" type="checkbox" value="cat" name="chkBox"></td>
        </tr>
        <tr>
          <td>Dog</td>
          <td class="vertalign" rowspan="5"><input class="checkbox-inline" type="checkbox" value="dog" name="chkBox"></td>
        </tr>
        <tr>
          <td>Cow</td>
          <td class="vertalign" rowspan="5"><input class="checkbox-inline" type="checkbox" value="cow" name="chkBox"></td>
        </tr>
        <tr>
          <td>Mouse</td>
          <td class="vertalign" rowspan="5"><input class="checkbox-inline" type="checkbox" value="mouse" name="chkBox"></td>
        </tr>
        <tr>
          <td>Goat</td>
          <td class="vertalign" rowspan="5"><input class="checkbox-inline" type="checkbox" value="goat" name="chkBox"></td>
        </tr>

      </tbody>
    </table>

This Question was asked in StackOverflow by Mohsina and Answered by DCodeMania It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.