jQuery控制checkbox全选全不选在火狐浏览器上的问题

cj_cheng 2013-04-19 11:21:57
这些代码在IE（我的是IE8）上测试没问题，在火狐（20.0）和谷歌（23.0..）浏览器上前两次可以，再点击就不行了，一直没弄懂是什么原因。有兴趣的一起探讨一下吧
.HTML代码
<html>



<head>

<title>测试</title>

<link type="text/css" href="../css/css.css" rel="stylesheet"/>

<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="../js/js.js"></script>

</head>



<body class="main">



		<fieldset id="attachments">

			<legend>附件列表</legend>

			

			<br>

			

			<table>

				<thead>

					<tr id="attachmenstTitle">

						<th><input id="chkall" type="checkbox"/></th>

						<th>文件名</th>

						<th>编码</th>

						<th>版本</th>

						<th>状态</th>

					</tr>

				</thead>

				<tbody>

					<tr>

						<td><input name="sub" type="checkbox"/></td>

						<td>施工方案</td>

						<td>JLY-PRJ-FA-001</td>

						<td>1</td>

						<td>发布</td>

					</tr>

					<tr>

						<td><input name="sub" type="checkbox"/></td>

						<td>施工方案</td>

						<td>JLY-PRJ-FA-001</td>

						<td>1</td>

						<td>发布</td>

					</tr>

				</tbody>

				

			</table>

			

			<br>

			

		</fieldset>

</body>

</html>

.jQuery代码
$(document).ready(function(){

	

	//复选框全选/全不选

	$("input[type=checkbox]#chkall").bind("click",function(){

		$("[name=sub]:checkbox").attr("checked", this.checked);

	});

	

});
...全文
308 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
cj_cheng 2013-04-22
  • 打赏
  • 举报
 回复
回复：ILOVE_ASPNET 5楼的兄台，你引用的是1.4版本的jQuery，这个我之前测过了没问题。我现在用的是1.9的,说的是1.9的问题。 回复：yenange 前些天有事，忘记打分了，不好意思哈。现在结贴吧
ILOVE_ASPNET 2013-04-20
  • 打赏
  • 举报
 回复 


<html>
 
<head>
<title>测试</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     
</head>
 
<body class="main">
 
        <fieldset id="attachments">
            <legend>附件列表</legend>
             
            <br>
             
            <table>
                <thead>
                    <tr id="attachmenstTitle">
                        <th><input id="chkall" type="checkbox"/></th>
                        <th>文件名</th>
                        <th>编码</th>
                        <th>版本</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input name="sub" type="checkbox"/></td>
                        <td>施工方案</td>
                        <td>JLY-PRJ-FA-001</td>
                        <td>1</td>
                        <td>发布</td>
                    </tr>
                    <tr>
                        <td><input name="sub" type="checkbox"/></td>
                        <td>施工方案</td>
                        <td>JLY-PRJ-FA-001</td>
                        <td>1</td>
                        <td>发布</td>
                    </tr>
                </tbody>
                 
            </table>
             
            <br>
            <script>
                $("#chkall").click(function () {
                    if ($(this).attr("checked"))
                        $("table tbody tr").find("input[type='checkbox']").attr("checked", true);
                    else
                        $("table tbody tr").find("input[type='checkbox']").attr("checked", false);
                })

            </script>
        </fieldset>
</body>
</html>
吉普赛的歌 社区高级成员 T9 2013-04-20
  • 打赏
  • 举报
 回复
哪天你写一个库， 规定人家只能怎么搞， 人家也只能按你的。
吉普赛的歌 社区高级成员 T9 2013-04-20
  • 打赏
  • 举报
 回复
不必这么纠结， 人家规定了就是没有办法的事情了。
吉普赛的歌 社区高级成员 T9 2013-04-19
  • 打赏
  • 举报
 回复 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
    <script type="text/javascript">  
        //name 是html表单专用于区别各组 chechbox 的属性， 不要用id(必须唯一)或者其它属性  
        function getValues() {  
            var aV = getCheckboxValues("a");  
            var bV = getCheckboxValues("b");  
            var cV = getCheckboxValues("c");  
  
            var result = "a组选中值: " + (aV=="" ? "未选中任何值" : aV) + "\n" +  
                "b组选中值: " + (bV == "" ? "未选中任何值" : bV) + "\n" +  
                "c组选中值: " + (cV == "" ? "未选中任何值" : cV);  
  
            alert(result);  
        }  
  
        function getCheckboxValues(name) {  
            return $(":checkbox[name="+name+"]:checked").map(function(){    
                return $(this).val();   
            }).get().join(",");  
        }  
  
        function chkAll(obj) {  
            var name = $(obj).attr("name");  
            //也许你觉得我写得太复杂， 但jquery 版本众多， 可以学点东西总是好的  
            //1. jquery 1.6 以上  
            //$(":checkbox[name=" + name.substring(0, 1) + "]").prop("checked", $(obj).prop("checked"));  
            //2. jquery 1.6 以下  
            //$(":checkbox[name=" + name.substring(0, 1) + "]").attr("checked", $(obj).attr("checked"));  
            //3. 通用写法  
            $(":checkbox[name=" + name.substring(0, 1) + "]").each(function () {  
                this.checked = obj.checked;  
            });  
        }  
    </script>  
</head>  
<body>  
    <div >  
        <span>第1组(a)：<input type="checkbox" name="aAll" onclick="chkAll(this)" />全选/全不选</span>  
        <input type="checkbox" name="a" value="a1" checked="checked" />a1  
        <input type="checkbox" name="a" value="a2" checked="checked"  />a2  
        <input type="checkbox" name="a" value="a3" />a3  
        <input type="checkbox" name="a" value="a4" />a4<br />  
  
        <span>第2组(b)：<input type="checkbox" name="bAll" onclick="chkAll(this)" />全选/全不选</span>  
        <input type="checkbox" name="b" value="b1" />b1  
        <input type="checkbox" name="b" value="b2" checked="checked" />b2  
        <input type="checkbox" name="b" value="b3" checked="checked"  />b3  
        <input type="checkbox" name="b" value="b4" />b4<br />  
  
        <span>第3组(c)：<input type="checkbox" name="cAll" onclick="chkAll(this)" />全选/全不选</span>  
        <input type="checkbox" name="c" value="c1" />c1  
        <input type="checkbox" name="c" value="c2" />c2  
        <input type="checkbox" name="c" value="c3" checked="checked" />c3  
        <input type="checkbox" name="c" value="c4" checked="checked"  />c4<br />  
  
        <br />  
        <input type="button" value="查找每组的选中的值" onclick="getValues()" />  
    </div>  
</body>  
</html>
cj_cheng 2013-04-19
  • 打赏
  • 举报
 回复
引用
//1. jquery 1.6 以上
//$(":checkbox[name=" + name.substring(0, 1) + "]").prop("checked", $(obj).prop("checked"));
//2. jquery 1.6 以下
//$(":checkbox[name=" + name.substring(0, 1) + "]").attr("checked", $(obj).attr("checked"));


原来是这个问题，谢啦！

可是就是不知道为什么火狐和谷歌浏览器在前两次点击可以？
火狐中 获取checkbox的checked属性的方法
火狐中 获取checkbox的checked属性的方法
jquery操作checkbox火狐下第二次无法勾选的解决方法
最近在学习jQuery（版本jquery-1.9.1.js），要求用jQuery实现全选/全不选、反选，在IE（IE8）中没有问题，但在火狐浏览器中调试的时候出现了一些小问题，达不到效果。 html代码如下：
解决jquery操作checkbox火狐下第二次无法勾选问题
最近在工作中使用jquery操作checkbox，使用下面方法进行全选、反选： 代码如下: var ischecked=allCheckObj.is(‘:checked’); ischecked?checksObj.attr(‘checked’,true):checksObj.attr(‘checked’,false); 调试时在ie没有问题，考虑到兼容性，试试了firefox，遇到了问题。于是乎，做了如下实验： 复选框绑定了click事件，点一次选中，再点击取消选中，依次类推。这个功能在ie中没问题，但是在firefox中测试的时候，前两次都没有问题，可以正常显示选中和取消，但当再去选中
jQuery checkbox选中问题之prop与attr注意点分析
主要介绍了jQuery checkbox选中问题之prop与attr注意点,结合form表单实例形式分析了针对火狐浏览器下checkbox失效情况的处理技巧,需要的朋友可以参考下
火狐，谷歌浏览器checkbox全选的问题
在工作中使用jquery操作checkbox，进行全选、反选，现在的问题是火狐下第二次无法勾选问题，在下面有个详细的解答，感兴趣的朋友可以参考下 最近在工作中使用jquery操作checkbox，使用下面方法进行全选、反选： 复制代码 代码如下: var ischecked=allCheckObj.is(':checked'); ischecked?checksObj.attr('...
JavaScript

87,996

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章