javascript 如何制作一个取消选中所有复选框的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22574344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a button that will uncheck all checkboxes?
提问by user3230425
I have this code that is possible to check/uncheck all checkboxes and check/uncheck a single checkbox.
我有这个代码可以选中/取消选中所有复选框并选中/取消选中单个复选框。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Persist checkboxes</title>
</head>
<body>
<div>
<label for="checkAll">Check all</label>
<input type="checkbox" id="checkAll">
</div>
<div>
<label for="option1">Option 1</label>
<input type="checkbox" id="option1">
</div>
<div>
<label for="option2">Option 2</label>
<input type="checkbox" id="option2">
</div>
<div>
<label for="option3">Option 3</label>
<input type="checkbox" id="option3">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<script>
$("#checkAll").on("change", function() {
$(':checkbox').not(this).prop('checked', this.checked);
});
$(":checkbox").on("change", function(){
var checkboxValues = {};
$(":checkbox").each(function(){
checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
});
function repopulateCheckboxes(){
var checkboxValues = $.cookie('checkboxValues');
if(checkboxValues){
Object.keys(checkboxValues).forEach(function(element) {
var checked = checkboxValues[element];
$("#" + element).prop('checked', checked);
});
}
}
$.cookie.json = true;
repopulateCheckboxes();
</script>
My question is that I want to make a button that will have a function that will clear or uncheck all checkboxes. Could some help me do that? Thanks!
我的问题是我想制作一个按钮，该按钮将具有清除或取消选中所有复选框的功能。有人可以帮我做吗？谢谢！
回答by T J
Calling the following function on button click will do:
单击按钮时调用以下函数将执行以下操作：
function uncheckAll(){
$('input[type="checkbox"]:checked').prop('checked',false);
}
function uncheckAll() {
$("input[type='checkbox']:checked").prop("checked", false)
}
$(':button').on('click', uncheckAll)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='checkbox' />
<input type='button' value="clear" />回答by Arryangga Aliev Pratamaputra
<button type="reset">Uncheck all</button>
回答by Muhammad Umer
Simple and fast
简单快速
http://jsfiddle.net/techsin/Zq6Et/
http://jsfiddle.net/techsin/Zq6Et/
$('#btn').click(function(){
$("input[type='checkbox']").attr("checked",false);
});
回答by Rahul
回答by Zword
回答by Butani Vijay
You can go to http://jsfiddle.net/fh2nV/1/link
你可以去http://jsfiddle.net/fh2nV/1/链接
or Sample Code below
或下面的示例代码
Html :
网址：
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Droid X</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>HTC Desire</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Apple iPhone 4</td>
</tr>
</table>
Jquery
查询
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
回答by TJC
Use a little bit of jQuery to achieve what you are looking to do.
使用一点点 jQuery 来实现您想要做的事情。
$("input[type='checkbox']").is(":checked").attr("checked",false)
$("input[type='checkbox']").is(":checked").attr("checked",false)
That should work. It isnt tested though and may not be syntactically correct. Just put in in a click listener for any element.
那应该有效。虽然它没有经过测试，并且在语法上可能不正确。只需为任何元素放入一个点击监听器。
