JQuery對RadioButton和CheckButton的操作

本文轉載自查看原文 2015-03-22 17:32 6130 JQuery操作RadioButton和CheckButton/ CheckButton全選/反選/ JQuery

js對RadioButton和CheckButton的操作，在網站開發中會經常遇到，而JQuery操作RadioButton和CheckButton非常便捷。小編覺得網站開發人員有必要熟練掌握。所以小編決定寫一篇文章總結一下。小編能力有限，但是有膀子力氣。老少爺們能不能點個贊呢？

RadioButton的基礎操作

1.獲取RadioButton

$("input[name=gender]")

或者是

$(":radio[name=gender]")

2.根據val設置選中

1）設置選中值得value

取得RadioButton的選中值，被選中的radio只有一個值，所以直接用val();

$("input[name=gender]").val(["女"]);

或者是

$(":radio[name=gender]").val(["女"]);

PS:注意val中的參數的【】不能省略，val()的參數必須是一個數組，盡管有時只有一個值。

2）設置選中

設置RadioButton的選中值： .attr('checked',true);

對於CheckBox和Select列表框

對RadioButton的選擇技巧對於CheckBox和Select列表框也適用

除了可以使用val批量設置RadioButton、CheckBox等的選中以外，還可以設定checked屬性來單獨設置控件的選中狀態

$(‘#selOne’).val([‘1’,’2’,’3’]);//同時設置多個下拉菜單選中

$("#btn1").attr("checked",true)

案例（全選、反選、全部選）

代碼：

<script type="text/javascript"> 
    $(function(){ 
        //全選 
        $('#btnAll').click(function(){ 
            $('div :checkbox').attr('checked',true); 
        }); 
        //全不選 
        $('#btnNoAll').click(function(){ 
            $('div :checkbox').attr('checked',false); 
        }); 
        //反選 
        $('#btnFanXuan').click(function(){ 
           $('div :checkbox').each(function(){ 
               $(this).attr('checked',!$(this).attr('checked')); 
           }); 
        }); 
    }); 
    </script> 
</head> 
<body> 
<input type="button"name="name"value="全選"id="btnAll"/> 
<input type="button"name="name"value="全不選"id="btnNoAll"/> 
<input type="button"name="name"value="反選"id="btnFanXuan"/> 
<div> 
    <input type="checkbox"name="name"value="1"/>吃飯 
    <input type="checkbox"name="name"value="2"/>睡覺 
    <input type="checkbox"name="name"value="3"/>打豆豆 
</div> 
</body>

免責聲明！

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

猜您在找 Python——Radiobutton,Checkbutton參數說明 Checkbutton基本寫法 jQuery操作input Jquery動態操作checkbox JQuery操作JSON數據 jQuery之cookie操作 jQuery對象的操作使用jquery操作session jQuery對checkbox的各種操作 jQuery對數組操作