Question

我有一个CLEAR按钮。 CLEAR按钮的目的是当用户单击该按钮时，将删除所有选中的复选框值。而已。现在不知怎的，我设法得到一个带有CLEAR按钮的复选框（对我来说似乎是唯一的方式），并且在点击时，然后选择所有复选框值，再次点击时，所有复选框值都被删除。是否可以只获取按钮，然后只需单击一下即可删除所选复选框？我当前的代码仅适用于第一个过滤菜单BRAND，但对于其他代码，它不起作用，我无法弄清楚原因。

这是我的BOOTPLY - BOOTPLY

＆＃13;

$("#clear").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

＆＃13;

/* 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,.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 */

＆＃13;

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

＆＃13;

Answer 1

你使用相同的ID四次。 ID选择器总是返回一个元素，在这种情况下，您只将事件附加到ID为#clear的第一个输入，因此它只能在第一个清除按钮上工作。改为使用类，并以某种方式确定更改的范围，以仅影响相关的复选框。

将ID更改为类并使用以下内容：

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

Working example

要确保clear按钮始终清除选择，您应始终将检查的属性设置为false，如下所示：

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

Updated example

Answer 2

它仅适用于第一个菜单，因为id被认为是唯一的。实际上，您只是将事件侦听器应用于第一个#clear元素。此外，您正在切换 all 复选框的checked属性，而不仅仅是该下拉菜单中的复选框。

将id属性更改为类，在本例中为.clear，当change事件触发时，选择最接近的.dropdown-menu元素并切换所有后代复选框元素：

Updated Example

$(".clear").on('change', function () {
    $(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', this.checked);
});

您也可以删除该复选框，并将点击事件附加到.btn_clear元素。您还需要停止事件传播，以防止下拉元素关闭：

Updated Example

$(".btn_clear").on('click', function (e) {
    e.stopPropagation();
    $(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});

清除复选框按钮不起作用

2 个答案: