元素的选中问题
<!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>
