TutorialMeta
Ad

Clear checkbox button not working

- 1 answer

Ad

I have a CLEAR button. The aim of that CLEAR button is that when a user clicks the button, all selected checkbox values are removed. Thats it. Now somehow I managed to get a checkbox with the CLEAR button (seemed for me the only way), and also upon clicking then all checkbox values are selected and when clicking again all checkbox values are removed. Is it possible to get only the button and then just one click for just removal of selected checkboxes? My current code only works for the first filter-menu BRAND, but for the others it does not work, I cant figure out why.

Here my BOOTPLY - BOOTPLY

$("#clear").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});
/* CSS used here will be applied after bootstrap.css */

/* FILTER_datafeed */
.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

/* Filter-menu APPLY and CLEAR */
.select_filter > .multi_select_container > .div_form > .btn_apply {
    border-right: 1px solid #e6e6e6;
    box-sizing: border-box;
    display: inline-block;
    float: left;
    padding: 10px 16px 10px 17px;
    text-align: center;
    width: 50%;
}

.select_filter > .multi_select_container > .div_form > .btn_clear.disabled, .select_filter > .multi_select_container > .div_form > .btn_clear[disabled], .select_filter > .multi_select_container > .div_form > .btn_clear[disabled]:hover {
    background-color: transparent;
    color: #ccc;
}
.select_filter > .multi_select_container > .div_form > .btn_clear {
    box-sizing: border-box;
    display: inline-block;
    float: right;
    padding: 10px 17px;
    text-align: center;
    width: 50%;
}

.checkbox :hover {
      background-color:red;
      cursor:pointer;
  	  width:100%;
    }

.div_form :hover {
      background-color:green;
      cursor:pointer;
    }

.btn_clear {
    float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
  }
  
.btn_apply {
      float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
    }

/* Type-ahead plugin */
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.tt-dropdown-menu {
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0,0,0,.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,a(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding;
          background-clip: padding-box;
}

.tt-suggestion {
  display: block;
  padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}

.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}

.tt-suggestion p {
  margin: 0;
}

/* Type-ahead plugin END */
<div class="btn-toolbar">
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-default" type="button">Brand</button>
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
                <input class="typeahead" placeholder="Search values" type="text">
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Alpha</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Beta
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Gamma</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Delta</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Omega</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Koppa
                    </label>
                </div>
				<div class="div_form">
							<span class="btn_apply" id="apply">Apply</span>
                  <span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
					</div>
            </div>
        </div><!--Primary buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Colour</button>
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
				<input class="typeahead" placeholder="Search values" type="text">
               <div class="checkbox">
                    <label><input value="" type="checkbox"> Eins</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Zwei
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Drei</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Vier</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Fünf</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Sechs
                    </label>
                </div>
				<div class="div_form">
							<span class="btn_apply" id="apply">Apply</span>
							<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
					</div>
            </div>
        </div><!--Info buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-info" type="button">Merchant</button>
            <button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
				<input class="typeahead" placeholder="Search values" type="text">
                <div class="checkbox">
                    <label><input value="" type="checkbox"> First value</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Second option
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Third choice</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Fourth alternative</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Fifth decision</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Sixt focus
                    </label>
                </div>
				<div class="div_form">
							<span class="btn_apply" id="apply">Apply</span>
							<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
					</div>
            </div>
        </div><!--Success buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-danger" type="button">Price</button>
            <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
				<input class="typeahead" placeholder="Search values" type="text">
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Value-1</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Value-2
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Value-3</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Value-4</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Value-5</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Value-6
                    </label>
                </div>
				<div class="div_form">
							<span class="btn_apply" id="apply">Apply</span>
							<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
					</div>
            </div>
        </div>
        </div><!--Success buttons with dropdown menu-->

Ad

Answer

Ad

Man you are using the same ID four times. The ID selector always return a single element, in your case you are only attaching the event to the first input with the id #clear so it will be working ONLY on the first clear button. Use a class instead and somehow scope the changes to affect only the related checkboxes.

Change the IDs to classes and use the following:

$(".clear").change(function () {
  $(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', $(this).prop("checked"));
});

Working example

To make sure the clear button always clear the selection, you should always set the property checked to false like this:

$(".clear").change(function () {
  $(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', false);
});

Updated example

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad
Ad