jquery中checkbox全选失效的解决方法

这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下

如果你使用jQuery 1.6 ，代码if ( $(elem).attr(“checked”) )，将获得一个属性(attribute) ，它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容，.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外，还会更新 property 属性，因此 boolean attribute（布尔属性）不需要通过 .prop() 来改变其值。推荐使用上述方法之一，来取得 checked 的值。

使用jQuery的attr方法获取和设置复选框的”checked”属性，发现第一次全选/取消全选有效，之后就无效了，但查看html源文件，复选框属性确实已经被更新了，就是页面中没有更新，正确的方法如下：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script type="text/javascript">// <![CDATA[

$(function(){

$(‘.ckAll‘).click(function(){

$(".box-items").each(function(){

  $(this).prop("checked",!!$(".box-all").prop("checked"));

});

});

});

// ]]></script>

<div><label class="ckAll"><input class="box-all" type="checkbox" /><span>全选</span></label>

<input class="box-items" type="checkbox" />

<input class="box-items" type="checkbox" />

<input class="box-items" type="checkbox" />

<input class="box-items" type="checkbox" />

<input class="box-items" type="checkbox" />

</div>
时间： 2024-10-08 20:04:38

jquery中checkbox全选失效的解决方法的相关文章

jQuery设置checkbox全选（区别jQuery版本）

jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery版本不同而已. jQuery很多版本都会对一些小的功能做一些改进,比如checkbox的选中. jQuery对checkbox改动的界线版本 jquery1.9.1. jquery1.9.1之前,全选是这样的: $('#checkbox').attr('checked',true) $('#chec

jQuery实现CheckBox全选、全不选

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 &

利用jQuery实现CheckBox全选/全不选/反选

转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%>   <!DOCTYPE

Jquery 组checkbox全选checkbox

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title></title> <style> </style></head><body><form action=""> <input type="checkbox&quo

jquery中的全选，全不选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>数据管理</title> &l

解决jquery操作checkbox全选全不选无法勾选问题

最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked","checked");调试时,前两次都没有问题,可以正常显示选中和取消,但当再去选中的时候,复选框的属性checkbox值变为"checked",没问题,但是复选框却不在显示选中状态,明明属性值改了,但是却不显示勾选,太诡异了.代码修改了却得不到正确的显示状态,纠结

实现前端table中checkbox全选功能，并将选中的数据发送到后端

一.需求 1. 点击这个checkbox按钮,会选中下面所用checkbox,当然在选中的情况下点击,会将下面所有选中的checkbox取消: 2. 当下面使用submit的提交按钮时,会将所有checkbox选中的数据提交给后端: 二.实现 1.实现全选checkbox功能 技术分析:其实这里可以使用js活着jquery两种方式,我暂时使用的是js中的dom实现的,具体代码如下: <!DOCTYPE html> <html> <head> <title>实

关于jQuery实现CheckBox全选只能生效一次的问题

//这代码只有一次全选.全不选的效果 第三次点击checkall会没有任何效果 $("#checkall").click(function(){ $('input[name="check"]').attr("checked",this.checked); }); //使用prop才能实现每次点击都能达到预期效果 $("#checkall").click(function(){ $('input[name="check

checkbox全选失效

先写一段全选的代码 //全选.全不选 $("#currentPageAllOrders").bind({ click : function(){ var allOrdersChecked = $(this).is(":checked") $("input[name='selectedId']").each(function () { $(this).attr("checked",allOrdersChecked); }) }