元素的选中问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 点击按钮选中性别
$("#btn").click(function(){
// DOM中操作
// document.getElementById("r2").checked = true;
// jQuery操作
// $("#r2")[0].checked = true;
// DOM的写法
// $("#r2").get(0).checked = true;
// 需要使用自定义属性的方式
// 设置
// $("#r2").attr("checked",true);
// 获取是否被选中了 undefined
// console.log($("#r2").attr("checked"));
// 如果标签默认选中了----attr("checked")---->结果:checked
// 如果标签没有选中----attr("checked")---->结果:undefined
// 点击按钮,选中就设置不选中,如果没有选中,就设置选中的结果
// attr方法针对单选框或者是复选框的是否选中问题,操作起来很麻烦
// 几乎不用,后面说
if($("#r2").attr("checked")==undefined){
// undefined
$("#r2").attr("checked",true);
console.log('哈哈');
}else{
// checked ----> 选中了
$("#r2").attr("checked",false);
console.log('嘎嘎');
}
});
});
</script>
</head>
<body>
<input type="button" value="选中" id="btn"><br>
请选择小苏的性别:
<input type="radio" name="sex" value="1" id="">男
<input type="radio" name="sex" value="2" id="r2">女
<input type="radio" name="sex" value="3" id="">保密
</body>
</html>操作元素选中的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
/**
* 设置或者是获取元素的选中的问题
* 推荐使用prop()方法
* .prop("属性","值");值一般是布尔类型---->目前这么写代码是设置选中
* .prop("属性");---->获取这个元素是否选中
*/
// 点击按钮
$("#btn").click(function(){
// $("#ck6").attr("checked",true);
// 获取复选框是否选中
// console.log($("#ck6").prop("checked"));
$("#ck6").prop("checked",true);
});
});
</script>
</head>
<body>
<input type="button" value="选中/不选中" id="btn">
<input type="checkbox" name="play" value="1">吃饭
<input type="checkbox" name="play" value="1">睡觉
<input type="checkbox" name="play" value="1">打豆豆
<input type="checkbox" name="play" value="1">打篮球
<input type="checkbox" name="play" value="1">打足球
<input type="checkbox" name="play" value="1" id="ck6">打铅球
</body>
</html>切换复选框选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 点击按钮
$("#btn").click(function(){
// 点一下,选中了,再点,就不再选中了
if($("#ck").prop("checked")){
// 选中了,就应该变成不是选中的状态
$("#ck").prop("checked",false);
}else{
$("#ck").prop("checked",true);
}
});
});
</script>
</head>
<body>
<input type="button" value="选中/不选中" id="btn">
<input type="checkbox" name="play" value="1" id="ck">玩游戏
</body>
</html>全选和全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 全选和全不选
// 获取thead中的复选框,获取他的这个选中的状态
// $("#ck_all").click(function(){
// // 获取当前的复选框的选中状态
// var flag = $("#ck_all").prop("checked");
// // console.log(flag);
// // 判断选中状态
// if(flag){
// $("div").find("input").prop("checked",true);
// }else{
// $("div").find("input").prop("checked",false);
// }
// });
// 复选框----全选和全不选
$("#ck_all").click(function(){
// 直接设置其他的复选框的状态和当前点击的复选框的状态一致
$("div").find("input").prop("checked",$(this).prop("checked"));
});
// 每个复选框都要注册点击事件
$("div").find("input").click(function(){
// 先获取所有复选框的个数
var ckLenth = $("div").find("input").length;
// 获取所有选中复选框的个数
var checkedLenth = $("div :checked").length;
// 测试代码
console.log(ckLenth + "========" + checkedLenth);
// if(ckLenth==checkedLenth){
// $("#ck_all").prop("checked",true);
// }else{
// $("#ck_all").prop("checked",false);
// }
// ckLenth==checkedLenth?$("#ck_all").prop("checked",true)
// :$("#ck_all").prop("checked",false);
$("#ck_all").prop("checked",ckLenth==checkedLenth);
});
});
</script>
</head>
<body>
<label><input type="checkbox" name="checkall" id="ck_all" />全选</label>
<br><br>
<div>
<label><input type="checkbox" name="checkbox" />复选框1</label>
<label><input type="checkbox" name="checkbox" />复选框2</label>
<label><input type="checkbox" name="checkbox" />复选框3</label>
<label><input type="checkbox" name="checkbox" />复选框4</label>
<label><input type="checkbox" name="checkbox" />复选框5</label>
</div>
</body>
</html>