關於復選框選中狀態的判斷


1.checked的選中狀態
不設置checked是默認不選被選中的,
一旦設置checked="false"或者checked = false或者checked="true"或者checked = true或者不設置任何值,都會被解釋為選中。
<input type="checkbox" name="test" id="test1"/>  //未被選中
<input type="checkbox" name="test" id="test2"/ checked="false">  //選中
<input type="checkbox" name="test" id="test3"/ checked="true">  //選中
<input type="checkbox" name="test" id="test4"/ checked=false>  //選中
<input type="checkbox" name="test" id="test5"/ checked=true>  //選中
<input type="checkbox" name="test" id="test6"/ checked >  //選中

 

2.取值(.val())--- 不能用來判斷狀態
<input type="checkbox" name="test" id="test1"/> //未被選中
<input type="checkbox" name="test" id="test2"/ checked>  //選中
console.log($("#test1").val())  //打印出on
console.log($("#test2").val())  //打印出on
對checked取值,無論是選中狀態或者未選中狀態都是on,
所以要判斷是否選中,不能使用.val()
 
 
3.取屬性值(.attr)--- 不能用來判斷狀態
<input type="checkbox" name="test" id="test1"/> //未被選中
<input type="checkbox" name="test" id="test2"/ checked>  //選中
console.log($("#test1").attr("checked"))  //打印出undefine
console.log($("#test2").attr("checked"))  //打印出undefine
對checked取值,無論是選中狀態或者未選中狀態都是undefine,
所以要判斷是否選中,不能使用.attr("checked")
 
4.獲取當前狀態(.prop())--- 可用來判斷狀態
<input type="checkbox" name="test" id="test1"/> //未被選中
<input type="checkbox" name="test" id="test2"/ checked>  //選中
console.log($("#test1").prop("checked"))  //打印出false
console.log($("#test2").prop("checked"))  //打印出true
用prop取值,選中狀態為true,未選中狀態都是false,
所以要判斷是否選中,可以使用.prop("checked")
 
 

5.$("input[type='checkbox']").is(':checked')---可用來判斷狀態

<input type="checkbox" name="test" id="test1"/> //未被選中
<input type="checkbox" name="test" id="test2"/ checked>  //選中
console.log($("#test1").is(":checked"))  //打印出false
console.log($("#test2").is(":checked"))  //打印出true
用.is(':checked'),選中狀態為true,未選中狀態都是false,
所以要判斷是否選中,可以使用.is(':checked')


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM