JQuery 复选框选中问题

gx3708173 2011-05-24 05:30:56
<script type="text/javascript">
$(function() {
$("#idex").click(function(){
if ($(this).attr("checked") == true)
{
$('input[name]=checkbox1').each(function(){
$(this).attr("checked",true);
});
} //全选打勾，下面复选框全部选中
else
{
$('input[name]=checkbox1').each(function(){
$(this).attr("checked",false);
});
} //取消全选打勾，下面复选框全部取消
});

//当全选状态下，点击下面某个复选框取消打钩，全选框也动态取消勾
//当未选状态下，点击下面所有复选框打钩，全选框动态选中
$('input[name]=checked').click(function(){
$(this).each(function(){
if ($(this).attr("checked"))
{

语句......
}

})
});

});

</script>
</head>
<body>
<form name="form1">
<center><h1>复选框实例</h1></center>
<input type="checkbox" id="idex" name="checkboxall" class="checkall" value="yyyy" onclick="selectAll(this);">全选</input><br/>
<input type="checkbox" name="checkbox1" id="checkbox1" value="">aa<br/>
<input type="checkbox" name="checkbox1" id="checkbox1" value="">bb<br/>
<input type="checkbox" name="checkbox1" id="checkbox1" value="">cc<br/>
<input type="checkbox" name="checkbox1" id="checkbox1" value="">dd<br/>
<input type="checkbox" name="checkbox1" id="checkbox1" value="">ee<br/>
<input type="checkbox" name="checkbox1" id="checkbox1" value="">ff<br/>
<input type="checkbox" name="checkbox1" id="checkbox1" value="">gg<br/>
<input type="checkbox" name="checkbox1" id="checkbox1" value="">hh<br/>
<input type="checkbox" name="checkbox1" id="checkbox1" value="">ii<br/>
<input type="checkbox" name="checkbox1" id="checkbox1" value="">kk<br/>
</form>
...全文
389 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
猿敲月下码 2011-05-24
  • 打赏
  • 举报
 回复 
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

<title>无标题文档</title>

<SCRIPT LANGUAGE="JavaScript">

<!--

	$(function() {  

		 $("#idex").click(function(){

			$('input[name=checkbox1]').attr('checked',$(this).attr("checked"));	

		 });



		//当全选状态下，点击下面某个复选框取消打钩，全选框也动态取消勾

		//当未选状态下，点击下面所有复选框打钩，全选框动态选中

		var $checkboxes = $('input[name="checkbox1"]');

		$('input[name=checkbox1]').click(function(){

			// 总个数

			var checkBoxCount = $checkboxes.length;			

			var $checked = $('input[name="checkbox1"]:checked');

			// 已选择的个数

			var checkedCount = $checked.length			

			$('#idex').attr('checked',checkBoxCount == checkedCount);		

		});

});  





//-->

</SCRIPT>

</head>



<body onload=''>



<form name="form1">

<center><h1>复选框实例</h1></center>

<input type="checkbox" id="idex" name="checkboxall" class="checkall" value="yyyy">全选</input><br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">aa<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">bb<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">cc<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">dd<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">ee<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">ff<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">gg<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">hh<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">ii<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">kk<br/>

</form>



</body>

</html>
乌镇程序员 2011-05-24
  • 打赏
  • 举报
 回复 
//10楼有点小问题，连全选那个复选框一起绑定了

$(":checkbox[name='checkbox1']").click( function() {

    if ($(":checkbox[name='checkbox1']:checked").length == $(":checkbox[name='checkbox1']").length) $("#idex").attr("checked","checked");

    else $("#idex").removeAttr("checked");

});
乌镇程序员 2011-05-24
  • 打赏
  • 举报
 回复 
	$(":checkbox").click( function() {

		if ($(":checkbox[name='checkbox1']:checked").length == $(":checkbox[name='checkbox1']").length) $("#idex").attr("checked","checked");

		else $("#idex").removeAttr("checked");

	});
zell419 2011-05-24
  • 打赏
  • 举报
 回复
if( $(":checkbox:not('#idex')[checked='true']").size()==$(":checkbox:not('#idex')").size()) $("#idex").attr("checked",true);

改了下 。这样 。应该是这样了 。
ted 2011-05-24
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 zell419 的回复:]
是这样吗 ？
[/Quote]

应该是只要有一个没被选中，就取消全选的效果吧
ted 2011-05-24
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 gx3708173 的回复:]
谢谢楼上，
我需要的是jquery写法
[/Quote]

自己转成jquery。。。
找个api看一下不难
zell419 2011-05-24
  • 打赏
  • 举报
 回复 


<!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>zell419</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

    <script>

      jQuery(function($) {

           $(":checkbox:not('#idex')").click(function(event) {

               if( $(":checkbox:not('#idex')[checked='true']").size()>0)    $("#idex").attr("checked",true);

               else $("#idex").attr("checked",false);

           });

      });

      var  selectAll =function(obj){

           //你的全选

      }

    </script>

</head>

<body>

 <form name="form1">

<center><h1>复选框实例</h1></center>

<input type="checkbox" id="idex" name="checkboxall" class="checkall" value="yyyy" onclick="selectAll(this);">全选</input><br/>

<input type="checkbox" name="checkbox1" id="checkbox1"  value="">aa<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">bb<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">cc<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">dd<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">ee<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">ff<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">gg<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">hh<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">ii<br/>

<input type="checkbox" name="checkbox1" id="checkbox1" value="">kk<br/>

</form>

</body>

</html>

是这样吗 ？
ted 2011-05-24
  • 打赏
  • 举报
 回复
这是有一个没选中，上面的那个就不选
全选中的那个效果不用说了吧


<html>

	<head>

		<script language="javascript">

			function check(){

				var allCb = document.getElementsByName("cb");

				var flag = false;

				for(var i = 0; i < allCb.length; i++){

					if(allCb[i].checked){

						flag = true;

					}

				}

				

				if(flag){

					document.getElementById("all").checked = false;

				}

			}

		</script>

	</head>

	<body>

		<input id="all" type="checkbox" onclick="check()" checked /><br /><br />

		<input name="cb" type="checkbox" onclick="check()" checked /><br />

		<input name="cb" type="checkbox" onclick="check()" checked /><br />

		<input name="cb" type="checkbox" onclick="check()" checked />

	</body>

</html>
gx3708173 2011-05-24
  • 打赏
  • 举报
 回复
谢谢楼上，
我需要的是jquery写法
ted 2011-05-24
  • 打赏
  • 举报
 回复
每点一次checkbox就循环遍历一下
定义个变量=0
如果没选
变量++
if(变量=1)
break循环

if(变量 > 0)
document.getElementById(id).checked = false;
gx3708173 2011-05-24
  • 打赏
  • 举报
 回复
谢谢楼上回复
//全选和不选是可以的
我想知道的是
//当全选状态下，点击下面某个复选框取消打钩，全选框也动态取消勾
//当未选状态下，点击下面所有复选框打钩，全选框动态选中
怎么弄
ted 2011-05-24
  • 打赏
  • 举报
 回复
全选全不选效果？
jquery一句话


function selectAll(checkbox) {  //全选全不选

				$('input[type=checkbox]').attr('checked', $(checkbox).attr('checked'));  

			}
jquery实现 复选框 选中和不选中 美化复选框
jquery实现 复选框 选中和不选中 美化复选框
jquery复选框选中按钮.rar
jquery复选框选中按钮
Jquery 复选框选中之后 按钮才能点击
利用Jquery 做出的效果是：复选框选中之后 按钮才能点击
jquery 实现鼠标单击行时，选中checkbox复选框
jquery 实现鼠标单击行时，改变行的背景颜色，选中checkbox复选框
jQuery如何判断checkbox（复选框）是否被选中
jQuery如何判断checkbox（复选框）是否被选中
JavaScript

87,907

社区成员

224,614

社区内容

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

加载中

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

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

+ 用AI写文章