復選框之checked屬性


  1、html中的checked屬性。仔細研究下會發現一個很怪異的現象。

  

  你知道上面這四個復選框到底那些被選中了?那些沒被選中嗎?

  其實乍一看我也不知道結果,運行完后也想不通為什么,查看資料才發現確實是那樣的。

  結果是:

  

 

  其實原理是這樣的,復選框里只要有checked屬性,不管是否為其賦值,結果為空或true或false或任意值,均為選中狀態。

  

  2、利用javascript操作checked來控制復選框是否選中。

  

  結果:

  

  要使其不選中,即設置checked屬性值為false。

 

  3.利用jQuery操作checked來控制復選框選中與否。

  

  結果第一個復選框選中。

  相反的,checked屬性值設為false就是未選中了

  

  這里需注意:

  無論是用javascript還是jQuery來操作checked屬性,其值均為true或false,切忌帶引號,否則會出錯。

 

   補充:獲取復選框是否選中問題:

  例如,有這樣一個例子,我要獲取這三個復選框是否選中:

<input type="checkbox" name="checkbox1" id="checkbox1" checked>看書
<input type="checkbox" name="checkbox2" id="checkbox2">電影
<input type="checkbox" name="checkbox3" id="checkbox3" checked>爬山

  在js中,我們可以這樣來寫:

var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
console.log(checkbox1.checked); // true
console.log(checkbox2.checked)  // false
console.log(checkbox3.checked)  // true

  

  在jQuery中,可以這樣獲取:

$(function(){
      console.log($("#checkbox1").attr('checked'))  // checked
      console.log($("#checkbox2").attr('checked'))  // undefined
      console.log($("#checkbox3").attr('checked'))  // checked
})

  從上面例子可以看出同樣是獲取復選框是否選中,js的獲取值是布爾值,即true 或者 false,而jQuery的獲取值則是checked或者undefined


免責聲明!

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



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