声明：如果你想去看具体的例子，请下载压缩包：checkbox-demo.rar就行了！
里面包括checkbox的基本操作的例子，以及一个淘宝的小例子！！
-
Checkbox的操作基本上就几种：选中，未选中，全选，取消全选，反选
-
<body>
-
<h3>关于checkbox的用法的例子</h3><br/>
-
<inputid="c1"type="checkbox"name="option1"value="value1"checked="checked"/>Value1
-
<inputid="c2"type="checkbox"name="option2"value="value2"/>Value2<br/>
-
<inputid="c3"type="checkbox"name="option3"value="value3"/>Value3
-
<inputtype="button"value="触发事件"/>
-
</body>
-
1. 操作一：判断一个checkbox是否处于选中状态
-
//方法一：
-
if($("#c1").is(":checked")) {
-
alert("方法一可以用！");
-
} else {
-
alert("方法一不可以用");
-
}
-
//方法二：
-
if($("#c2").attr("checked") == false) {
-
alert("方法二可以用！");
-
} else {
-
alert("方法二不可以用");
-
}
-
2. 操作二：让一个checkbox处于选中状态！
-
$("#c3").attr("checked","checked");
-
或者
-
$("#c3").attr("checked",true);
-
3. 操作三：取消一个checkbox的选中状态！
-
$("#c1").removeAttr("checked");
-
或者
-
$("#c1").attr("checked",false);
-
4. 操作四：获取checkbox的值！
-
var value1 = $("#c1").val();
-
或者
-
Var value2 = document.getElementById(“c2”).value;
-
<body>
-
<h3>下面我们来练习一下全选与反选的例子</h3>
-
<inputclass="son"type="checkbox"name="son"value="value1"/>
-
<inputclass="son"type="checkbox"name="son"value="value2"/>
-
<inputclass="son"type="checkbox"name="son"value="value3"/>
-
<inputclass="son"type="checkbox"name="son"value="value4"/>
-
<inputclass="son"type="checkbox"name="son"value="value5"/>
-
<inputclass="son"type="checkbox"name="son"value="value6"/><br/><br/>
-
<inputid="father"type="checkbox"name="father"value="value7"/>全选
-
-
<inputid="un"type="checkbox"name="option8"value="value8"/>反选
-
</body>
-
5. 操作五：全选
-
方法一：
-
$("#father").click(function(){
-
//获取父选框和子选框数组
-
var father = document.getElementById("father");
-
var sons = document.getElementsByName("son");
-
//设置子选框的选中状态和父相同
-
for(var i=0; i <sons.length; i++) {
-
sons[i].checked = father.checked;
-
}
-
});
-
方法二：
-
$("#father").click(function(){
-
var flag = $(this).attr("checked");
-
$("[name=son]:checkbox").each(function(){
-
$(this).attr("checked",flag);
-
});
-
});
-
6.通过每一个子复选框来判断全选的复选框是否应处于选中状态
-
方法一：
-
$(".son").click(function(){
-
var num=0;
-
var father = document.getElementById("father");
-
var sons = document.getElementsByName("son");
-
for(var i=0; i <sons.lenth; i++) {
-
if(sons[i].checked) {
-
num++;
-
}
-
}
-
if(num == sons.lenth) {
-
father.checked = true;
-
} else {
-
father.checked = false;
-
}
-
});
-
方法二：
-
$(".son").click(function(){
-
$("[name=son]:checkbox").each(function(){
-
if($(this).attr("checked") == false) {
-
$("#father").attr("checked",false);
-
}
-
});
-
});
-
7.反选：
-
$("#un").click(function(){
-
var num = 0;
-
var father = document.getElementById("father");
-
var sons = document.getElementsByName("son");
-
for(var i=0; i<sons.length; i++) {
-
sons[i].checked = !sons[i].checked;
-
if(sons[i].checked) {
-
num++;
-
}
-
}
-
if(num == sons.length) {
-
father.checked = true;
-
} else {
-
father.checked = false;
-
}
-
});
***********************************************************************************
2013-12-05-add
|
1
2
3
4
5
6
|
/**
* 操作五：全选
*/
$(
"#father"
).click(
function
(){
$(
"input[name='son']"
).attr(
"checked"
,$(
this
).is(
":checked"
));
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/**
* 6.通过每一个子复选框来判断全选的复选框是否应处于选中状态
*/
$(
".son"
).click(
function
(){
var
num = 0;
var
length = $(
"input[name='son']"
).length;
$(
"input[name='son']"
).each(
function
(){
if
($(
this
).is(
":checked"
)) {
num++;
}
});
if
(num == length) {
$(
"#father"
).attr({
"checked"
:
"checked"
});
}
else
{
$(
"#father"
).removeAttr(
"checked"
);
}
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/**
* 7.反选
*/
$(
"#un"
).click(
function
(){
var
num = 0;
var
length = $(
"input[name='son']"
).length;
$(
"input[name='son']"
).each(
function
(index,domEle){
if
($(
this
).is(
":checked"
)) {
$(
this
).removeAttr(
"checked"
);
}
else
{
$(
this
).attr(
"checked"
,
true
);
num++;
}
});
if
(num == length) {
$(
"#father"
).attr({
"checked"
:
"checked"
});
}
else
{
$(
"#father"
).removeAttr(
"checked"
);
}
});
|
===============================================================
2013-12-10-add
$("input[name='son']:checked").each(function(){
//if($(this).is(":checked")) {
num++;
//}
});
本文转自韩立伟 51CTO博客，原文链接：http://blog.51cto.com/hanchaohan/772066，如需转载请自行联系原作者
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
