前端開發學習之——使用jquery/javascript判斷及改變checkbox選中狀態


一、使用jquery判斷及改變checkbox選中狀態

1.使用JQuery判斷一個checkbox 是否為選中:

(1).attr('checked)

看JQuery版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false

(2).prop('checked')

1.6+:true/false

(3).is(':checked') 

eg:$("input[type='checkbox']").is(':checked');選中為true,未選中為false;

所有版本:true/false

 

2.改變選中狀態

(1)使用attr方法進行checkbox狀態的改變。

選中:$("input[type='checkbox']").attr("checked",true);

取消選中:$("input[type='checkbox']").attr("checked",false);

(2)但是有時使用attr操作,雖然屬性值改變了,但是頁面上的checkbox並沒有選中。在這種情況下,建議使用prop方法來操作改變checkbox選中狀態。

選中:  

$("input[type='checkbox']").prop("checked",true);

$("input[type='checkbox']").prop({checked:true}); //map鍵值對

$("input[type='checkbox']").prop("checked",function(){return true;});//函數返回true或false

$("input[type='checkbox']").prop("checked","checked");

取消選中:

$("input[type='checkbox']").prop("checked",false);

 

3.獲取value值

使用Jquery獲取checkbox的值,在沒有給value值的情況下,獲取的值為"on"。

使用Jquery獲取checkbox的值,給value值的情況下,獲取的值是value值。

 

4.舉例:實現反選

$(":checkbox").each(function(){
  if($(this).prop("checked")){
    $(this).prop("checked",false);
  }else{
    $(this).prop("checked",true);
  }
});

其中:
全選: $(":checkbox").prop("checked",true)
取消全選:$(":checkbox").prop("checked",false)
獲取選中的:$(":checkbox:checked")


二、使用javascript判斷及改變checkbox選中狀態

判斷:

document.getElementById("someCheckbox").checked  //值為true或false

改變

document.getElementById("someCheckbox").checked = true;

document.getElementById("someCheckbox").checked = false;

 

 

 


免責聲明!

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



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