複選框之checked屬性

　　今天無意中看到同僚在學習複選框裡面的checked屬性的應用，當時看了一下，感覺熟悉而又陌生，發現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

轉載于:https://www.cnblogs.com/jf-67/p/6613898.html