元素的选中问题 元素选中的问题 切换复选框选中 全选和全不选
生活随笔
收集整理的這篇文章主要介紹了
元素的选中问题 元素选中的问题 切换复选框选中 全选和全不选
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
元素的選中問題
<!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>?
總結
以上是生活随笔為你收集整理的元素的选中问题 元素选中的问题 切换复选框选中 全选和全不选的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 点击按钮创建一个表格 点击按钮创建一个表
- 下一篇： 设置元素的宽和高 元素的left和top