清除复选框按钮不起作用
Clear checkbox button not working
我有一个CLEAR按钮。CLEAR按钮的目的是，当用户单击该按钮时，所有选中的复选框值都将被删除。就是这样。现在不知怎么的，我用CLEAR按钮得到了一个复选框（对我来说似乎是唯一的方法），点击后，所有的复选框值都会被选中，再次点击时，所有复选框值会被删除。是否可以只点击按钮，然后只点击一次，删除选中的复选框？我当前的代码只适用于第一个过滤器菜单BRAND，但对于其他菜单，它不起作用，我不知道为什么。
这是我的靴子-靴子
$("#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,.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--> 伙计，你已经使用同一个ID四次了。ID选择器总是返回一个元素，在您的情况下，您只将事件附加到ID为#clear的第一个输入，因此它将仅在第一个清除按钮上工作。改为使用类，并以某种方式确定更改的范围，以仅影响相关的复选框。
将ID更改为类并使用以下内容：
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', $(this).prop("checked"));
});
工作示例
为了确保clear按钮始终清除选择，您应该始终将选中的属性设置为false，如下所示：
$(".clear").change(function () {
$(this).closest('.dropdown-menu').find('input:checkbox').prop('checked', false);
});
更新的示例
它只适用于第一个菜单，因为id被认为是唯一的。实际上，您只将事件侦听器应用于第一个#clear元素。此外，您将切换的checked属性所有复选框，而不仅仅是下拉菜单中的复选框。
将id属性更改为一个类，在本例中为.clear，当触发change事件时，选择最近的.dropdown-menu元素并切换所有子复选框元素：
更新示例
$(".clear").on('change', function () {
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', this.checked);
});
您也可以删除复选框，并将单击事件附加到.btn_clear元素。您还需要停止事件传播，以防止下拉元素关闭：
更新示例
$(".btn_clear").on('click', function (e) {
e.stopPropagation();
$(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});
相关文章：
- 点击按钮输入不起作用
- Js.erb VS按钮标记-不'不起作用.为什么?
- 按钮字段确认点击不'不起作用
- JQuery示例不起作用-“;对象没有't支持属性或方法'按钮'&”;
- ng disabled在chrome中不起作用.按钮在角度上未禁用
- JS动态添加字段-删除按钮不起作用
- 角度无线电按钮ng模型不起作用
- 当我通过.aspx.cs创建按钮时，它不起作用
- 一键启动按钮不起作用
- 带有向下钻取的 Amchart 图表工作正常，但“后退”按钮不起作用
- 为什么不'这个HTML按钮不起作用
- 使用javascript后，提交按钮不起作用
- 表单中的提交按钮在 PHP 打印中不起作用
- 镀铬延长件内部的聚合物纸按钮不起作用
- 我的提交按钮不起作用
- 搜索按钮谷歌地图在我的vf页面上不起作用
- AngularJs:多次点击同一个按钮不起作用
- 我尝试将引导下拉按钮添加到 但下拉菜单不起作用.我该怎么做
- visualforce页面javascript按钮点击不起作用
- 单击功能不起作用按钮
