Javascript 使用jQuery选择所有复选框
我有以下html代码:Javascript 使用jQuery选择所有复选框,javascript,jquery,Javascript,Jquery,我有以下html代码: <input type="checkbox" id="ckbCheckAll" /> <p id="checkBoxes"> <input type="checkbox" class="checkBoxClass" id="Checkbox1" /> <br /> <input type="checkbox" class="checkBoxClass" i
<input type="checkbox" id="ckbCheckAll" />
<p id="checkBoxes">
<input type="checkbox" class="checkBoxClass" id="Checkbox1" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox2" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox3" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox4" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox5" />
<br />
</p>
当我在浏览器中看到我的页面时,我得到以下结果:
在第一次单击ckbCheckAll时,选中了所有正确的复选框。在第二次单击ckbCheckAll时,所有复选框均未选中,这是正确的。但在第三次尝试中什么也没发生!在第四次尝试中也没有发生任何事情,以此类推
问题出在哪里?使用此选项
if (this.checked)
$(".checkBoxClass").attr('checked', "checked");
else
$(".checkBoxClass").removeAttr('checked');
您也可以使用道具请检查使用道具
$(".checkBoxClass").prop('checked', true);
或取消选中:
$(".checkBoxClass").prop('checked', false);
更新了JSFIDLE链接:改用prop-
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").each(function(){
if($(this).prop("checked", true)) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
});
});
但我喜欢@dmk更简洁的答案,而且+1会让它更简洁
$(document).ready(function() {
$('#ckbCheckAll').click(function() {
$('.checkBoxClass').each(function() {
$(this).attr('checked',!$(this).attr('checked'));
});
});
});
或
试试这个
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$("#checkBoxes input").prop('checked', $(this).prop('checked'));
});
});
应该这样做:使用下面的代码
$('#globalCheckbox').click(function(){
if($(this).prop("checked")) {
$(".checkBox").prop("checked", true);
} else {
$(".checkBox").prop("checked", false);
}
});
$('.checkBox').click(function(){
if($(".checkBox").length == $(".checkBox:checked").length) {
//if the length is same then untick
$("#globalCheckbox").prop("checked", false);
}else {
//vise versa
$("#globalCheckbox").prop("checked", true);
}
});
下面是一个简单的方法: Html:
<input type="checkbox" id="selectall" class="css-checkbox " name="selectall"/>Selectall<br>
<input type="checkbox" class="checkboxall" value="checkbox1"/>checkbox1<br>
<input type="checkbox" class="checkboxall" value="checkbox2"/>checkbox2<br>
<input type="checkbox" class="checkboxall" value="checkbox3"/>checkbox3<br>
让我有以下复选框
下面是当selectall复选框单击时选择all和取消选择all的简单代码
请尝试以下简单代码:
$('input[type=checkbox]').each(function() { this.checked = true; });
来源:checkall是所有复选框的id,cb child是每个复选框的名称,将根据checkall click事件进行选中和取消选中
$("#checkall").click(function () {
if(this.checked){
$("input[name='cb-child']").each(function (i, el) {
el.setAttribute("checked", "checked");
el.checked = true;
el.parentElement.className = "checked";
});
}else{
$("input[name='cb-child']").each(function (i, el) {
el.removeAttribute("checked");
el.parentElement.className = "";
});
}
});
我知道这已经太晚了,但是我将为即将到来的开发者发布这篇文章 对于全选复选框,我们需要选中三个条件, 1.单击“全选”复选框,应选中每个复选框 2.如果全部选中,然后单击全选复选框,则应取消选中每个复选框 3.如果取消选择或选中任何复选框,则“全选”复选框也应更改 有了这三件事,我们会得到一个好的结果。为此,您可以访问此链接 我从这里得到了我的解决方案,他们提供了带有示例的解决方案
<table>
<tr>
<th><input type="checkbox" id="select_all"/> Select all</th>
</tr>
<tr>
<td><input type="checkbox" class="check" value="1"/> Check 1</td>
<td><input type="checkbox" class="check" value="2"/> Check 2</td>
<td><input type="checkbox" class="check" value="3"/> Check 3</td>
<td><input type="checkbox" class="check" value="4"/> Check 4</td>
<td><input type="checkbox" class="check" value="5"/> Check 5</td>
</tr>
});
希望这将帮助任何人…:添加jquery-2.1.0.min.js文件
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
写出下面给出的代码:
<script>
$(document).ready(function () {
$("#checkAll").change(function() {
var checked = $(this).is(':checked'); // Get Checkbox state
if (this.checked) //If true then checked all checkboxes
$(".classofyourallcheckbox").prop('checked', true);
else
$(".classofyourallcheckbox").prop('checked', false); //or uncheck all textboxes
});
});
</script>
我看过很多关于这个问题的答案,发现有些答案很长,有些答案有点错。我使用上述ID和类创建了自己的代码
$('#ckbCheckAll').click(function(){
if($(this).prop("checked")) {
$(".checkBoxClass").prop("checked", true);
} else {
$(".checkBoxClass").prop("checked", false);
}
});
$('.checkBoxClass').click(function(){
if($(".checkBoxClass").length == $(".checkBoxClass:checked").length) {
$("#ckbCheckAll").prop("checked", true);
}else {
$("#ckbCheckAll").prop("checked", false);
}
});
在上述代码中,当用户单击全选复选框时,所有复选框都将被选中,反之亦然,当用户逐个选择复选框时,第二个代码将起作用,然后全选复选框将根据选中的复选框数被选中或取消选中。prop应用于此操作。刚才添加了prop,但后来prop添加了jquery出于这个原因,我不喜欢它,但这是个人的选择当然…-1因为道具是一种方式,而不仅仅是一些替代品。@JayBlanchard:你的解释是非常错误的。它是attributes x.setAttribute'foo',..,x.getAttribute'foo'vs properties x.foo。值是一个字符串,但应该始终作为属性处理。@JayBlanchard谢谢。我刚刚用“道具”替换了“attr”。很好用!您没有先检查.checkBoxClass是否已检查。@JayBlanchard,那又怎样?他们都需要被检查,不管他们是否被检查。他正在寻找额外的行为-检查如果没有检查,取消检查如果检查。我喜欢你的风格@dmk。真让人印象深刻+1.FYI:如果取消选中子复选框,则更新fiddle以取消选中所有复选框。欢迎来到StackOverflow!谢谢你的回答。发布一个只包含内容的答案通常不会有太大的帮助。考虑解释这个代码是如何解决这个问题的:欢迎堆栈溢出:-请看。您应该提供一些信息,说明代码解决问题的原因。仅代码的答案对社区没有用处。更新的代码可能会重复,因此它将适用于最新的jquery
<input type="checkbox" name="vehicle" value="select All" id="chk_selall">Select ALL<br>
<input type="checkbox" name="vehicle" value="Bike" id="chk_byk">bike<br>
<input type="checkbox" name="vehicle" value="Car" id="chk_car">car
<input type="checkbox" name="vehicle" value="Bike" id="chk_bus">Bus<br>
<input type="checkbox" name="vehicle" value="scooty" id="chk_scooty">scooty
<script type="text/javascript">
$(document).ready(function () {
$("#chk_selall").on("click", function () {
$("#chk_byk").prop("checked", true);
$("#chk_car").prop("checked", true);
$("#chk_bus").prop("checked", true);
$("#chk_scooty").prop("checked", true);
})
$("#chk_selall").on("click", function () {
if (!$(this).prop("checked"))
{
$("#chk_byk").prop("checked", false);
$("#chk_car").prop("checked", false);
$("#chk_bus").prop("checked", false);
$("#chk_scooty").prop("checked", false);
}
});
});
</script>
$('input[type=checkbox]').each(function() { this.checked = true; });
$("#checkall").click(function () {
if(this.checked){
$("input[name='cb-child']").each(function (i, el) {
el.setAttribute("checked", "checked");
el.checked = true;
el.parentElement.className = "checked";
});
}else{
$("input[name='cb-child']").each(function (i, el) {
el.removeAttribute("checked");
el.parentElement.className = "";
});
}
});
jQuery( function($){
// add multiple select / deselect functionality
$("#contact_select_all").click(function () {
if($("#contact_select_all").is(":checked")){
$('.noborder').prop('checked',true);
}else
$('.noborder').prop('checked',false);
});
// if all checkbox are selected, check the selectall checkbox
$(".noborder").click(function(){
if($(".noborder").length == $(".noborder:checked").length) {
$("#contact_select_all").attr("checked", "checked");
} else {
$("#contact_select_all").removeAttr("checked");
}
});
});
<table>
<tr>
<th><input type="checkbox" id="select_all"/> Select all</th>
</tr>
<tr>
<td><input type="checkbox" class="check" value="1"/> Check 1</td>
<td><input type="checkbox" class="check" value="2"/> Check 2</td>
<td><input type="checkbox" class="check" value="3"/> Check 3</td>
<td><input type="checkbox" class="check" value="4"/> Check 4</td>
<td><input type="checkbox" class="check" value="5"/> Check 5</td>
</tr>
<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.check').each(function(){
this.checked = true;
});
}else{
$('.check').each(function(){
this.checked = false;
});
}
});
$('.check').on('click',function(){
if($('.check:checked').length == $('.check').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function () {
$("#checkAll").change(function() {
var checked = $(this).is(':checked'); // Get Checkbox state
if (this.checked) //If true then checked all checkboxes
$(".classofyourallcheckbox").prop('checked', true);
else
$(".classofyourallcheckbox").prop('checked', false); //or uncheck all textboxes
});
});
</script>
$('#ckbCheckAll').click(function(){
if($(this).prop("checked")) {
$(".checkBoxClass").prop("checked", true);
} else {
$(".checkBoxClass").prop("checked", false);
}
});
$('.checkBoxClass').click(function(){
if($(".checkBoxClass").length == $(".checkBoxClass:checked").length) {
$("#ckbCheckAll").prop("checked", true);
}else {
$("#ckbCheckAll").prop("checked", false);
}
});