CODEWITHSUNDEEP
jquerytwitter-bootstrap
Aisha Kumari
Aisha Kumari

Reputation: 193

how reset all checkbox in bootstrap dropdown

How to reset all checkbox in bootstrap dropdown whenever I click on dropdown. After dropdown when I check the check box it will remain checked but when I again dropdown the all checked box should came to its normal position unchecked. One thing is that whenever I click on dropdown all the checked boxes will be unchecked. I have tried with Jquery .removeAttr and some others attributes but then also it was not working....Can any one help me to find out this problem.

After dropdown when I check the check box it will remain check but when I again dropdown the all checked box should came to its normal position unchecked. One thing is that whenever I click on dropdown the all check box will be unchecked. I had tried with Jquery......Is this posible to do that?

$( 'input[type="checkbox"]' ).prop('checked', false);
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item"><input type="checkbox">Action</a>
    <a class="dropdown-item"><input type="checkbox">Another action</a>
    <a class="dropdown-item"><input type="checkbox">Something else here</a>
  </div>
</div>

Upvotes: 0

Views: 574

Answers (2)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

You can do it like this:

$("#dropdownMenuButton").click(function() {
  $('.dropdown-menu.show input[type="checkbox"]').prop('checked', false);
});

This will clear all the checkbox once you click on the dropdown.

Demo

$('input[type="checkbox"]').prop('checked', false);
$("#dropdownMenuButton").click(function() {
  $('.dropdown-menu.show input[type="checkbox"]').prop('checked', false);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item"><input type="checkbox">Action</a>
    <a class="dropdown-item"><input type="checkbox">Another action</a>
    <a class="dropdown-item"><input type="checkbox">Something else here</a>
  </div>
</div>

Upvotes: 1

Frenchy
Frenchy

Reputation: 17035

You reset all checkbox only when you open the dropdown, and keep checkbox checked when the dropdown is closed.

$( 'input[type="checkbox"]' ).prop('checked', false);

$("#dropdownMenuButton").click(function() {
   if(!$('.dropdown-menu').hasClass("show")){
     $('.dropdown-menu input[type="checkbox"]').prop('checked', false);
   }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item"><input type="checkbox">Action</a>
    <a class="dropdown-item"><input type="checkbox">Another action</a>
    <a class="dropdown-item"><input type="checkbox">Something else here</a>
  </div>
</div>

Upvotes: 2

Related Questions