JQuery判断checkbox是否选中及其它复选框操作方法合集

时间：2021-05-26

一、jquery判断checkbox是否选中及改变checkbox状态

jquery判断checked的三种方法:
复制代码 代码如下:
.attr('checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'): //所有版本:true/false//别忘记冒号哦

jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
复制代码 代码如下:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);

jquery1.6+:prop的4种赋值:
复制代码 代码如下:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");

二、jquery如何判断checkbox（复选框）是否被选中

谁都知道 在html 如果一个复选框被选中 是 checked="checked"。

但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked

所以很多朋友判断 if($("#id").attr("checked")=="true") 这个是错误的，其实应该是 if($("#id").attr("checked")==true)
例子里面包括了一下几个功能。
复制代码 代码如下:
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="取消全选">
<input type="button" id="btn3" value="选中所有奇数">
<input type="button" id="btn4" value="反选">
<input type="button" id="btn5" value="获得选中的所有值">

代码
复制代码 代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript" src="http:///jquery-1.6.4.min.js" ></script>
<script type="text/javascript">
$(function(){

$('#cboxchecked').click(function(){
//判断apple是否被选中
var bischecked=$('#cboxchecked').is(':checked');
var fruit=$('input[name="fruit"]');
bischecked?fruit.attr('checked',true):fruit.attr('checked',false);
});

$('#btn_submit').submit(function(){
$('input[name="fruit"]:checked').each(function(){
var sfruit=$(this).val();
alert(sfruit);
});
return false;
});
})
</script>
</head>

<body>
<form action="">
<input type="checkbox" id="cboxchecked" />
<label for="cboxchecked">全选/全不选</label>
<br />
<br />
<input type="checkbox" id="cboxapple" name="fruit" value="apple" />
<label for="apple">Apple</label>
<input type="checkbox" id="cboxorange" name="fruit" value="orange" />
<label for="orange">Orange</label>
<input type="checkbox" id="cboxbanana" name="fruit" value="banana" />
<label for="banana">Banana</label>
<input type="checkbox" id="cboxgrapes" name="fruit" value="grapes" />
<label for="grapes">Grapes</label>
<br />
<br />
<input type="submit" id="btn_submit" value="submit" />
</form>
</body>
</html>


声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章