1、CheckBox实现全选
下面代码来自网上：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选效果</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" />全选
<input type="checkbox" />语文
<input type="checkbox" />数学
<input type="checkbox" />英语
</body>
<script type="text/javascript">
$(function(){
$('input').click(function(){
if($(this).index() == 0){
//判断当前全选框是否选中，如果选中则全选，否则全不选
if($('input').eq(0).prop('checked')){
$(this).nextAll().prop('checked',true);
}else{
$(this).nextAll().prop('checked',false);
}
}else{
//判断除了全选之外的选项是否全部选中，选中则勾上全选，否则全不选
if($('input:gt(0):checked').length == $('input').length-1){
$('input').eq(0).prop('checked',true)
}else{
$('input').eq(0).prop('checked',false)
}
}
})
})
</script>
</html>
遗忘的知识点：
$('input').eq(0).prop('checked')一个参数，获取该属性的值，两位参数为设置该属性的值。注：prop为property属性的简写。$('input:gt(0):checked'):gt(numer)为获取下标大于这个number的标签，：lt(number)下标小于这个number的标签- :checked 为获取被选中的按钮
2、radio实现单选
只需给它们添加相同的name值：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span>绑定的时候可以点击文字</span>
<form >
<label >你对什么运动感兴趣</label>
<br/>
<label>慢跑</label>
<input type="radio" name="sport" id="慢跑">
<br/>
<label for="登山">登山</label>
<input type="radio" name="sport" id="登山">
<br/>
<label for="篮球">篮球</label>
<input type="radio" name="sport" id="篮球">
<br/>
</form>
</body>
</html>
我们可以使用label标签，在input里加id="id值"，在label标签里加for="id值"实现点击文字时也可以将单选按钮给选中
特别说明一下：给input绑定的事件也会添加到Label上。所以，不用再特别去给label添加
3、实现取消单选按钮被选中状态
我们会发现，单选按钮一旦被选中，再次点击是无法取消选中的，这个时候就需要js来实现取消选中的效果。
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
</head>
<body>
<input type="radio">选择-取消选择
</body>
<script type="text/javascript">
$(function () {
var flag = true;
$("input:radio").click(function () {
$(this).prop("checked",flag);
flag = !flag;
})
});
</script>
</html>
网友评论