JQuery的checkbox、radio、select方法总结

JQuery 的 checkbox，radio和select是JQuery操作的一个难点和重点，很多前端新手对其了解不是很透彻。时间久了不用，我在写的时候有时也难免对某些操作支支吾吾，记不清楚，现在，对其做一些简单的总结！

1 checkbox

现在我们以下面的html为例进行checkbox的操作。

<input id=checkAll type=checkbox />全选
<input name=subBox type=checkbox />项1
<input name=subBox type=checkbox />项2
<input name=subBox type=checkbox />项3
<input name=subBox type=checkbox />项4

全选和全部选代码

<script type=text/javascript>
        $(function() {
           $(#checkAll).click(function() {
                $('input[name=subBox]').attr(checked,this.checked);
            });
            var $subBox = $(input[name='subBox']);
            $subBox.click(function(){
                $(#checkAll).attr(checked,$subBox.length == $(input[name='subBox']:checked).length ? true : false);
            });
        });
</script>

checkbox属性

var val = $(#checkAll).val();                             // 获取指定id的复选框的值
var isSelected = $(#checkAll).is(':checked'); // 判断id=checkAll的那个复选框是否处于选中状态，选中则isSelected=true;否则isSelected=false; 
$(#checkAll).attr(checked, true); // or 
$(#checkAll).attr(checked, 'checked'); // 将id=checkbox_id3的那个复选框选中，即打勾 
$(#checkAll).attr(checked, false); // or $(#checkAll).attr(checked, ''); // 将id=checkbox_id3的那个复选框不选中，即不打勾 
$(input[name=subBox][value=3]).attr(checked, 'checked'); // 将name=subBox, value=3 的那个复选框选中，即打勾 
$(input[name=subBox][value=3]).attr(checked, ''); // 将name=subBox, value=3 的那个复选框不选中，即不打勾
 $(input[type=checkbox][name=subBox]).get(2).checked = true; // 设置index = 2，即第三项为选中状态 
$(input[type=checkbox]:checked).each(function(){ //由于复选框一般选中的是多个,所以可以循环输出选中的值 alert($(this).val()); });

关于checkbox的细节，请参考：http://www.awaimai.com/898.html

2 radio

我们以下面的html为例：

<input type=radio name=radio id=radio1 value=1 />1  
<input type=radio name=radio id=radio2 value=2 />2  
<input type=radio name=radio id=radio3 value=3 />3  
<input type=radio name=radio id=radio4 value=4 />4

radio操作如下：

$(input[name=radio]:eq(0)).attr(checked,'checked');                       //这样就是第一个选中咯。
//jquery中，radio的选中与否和checkbox是一样的。
$(#radio1).attr(checked,checked);
$(#radio1).removeAttr(checked);
$(input[type='radio'][name='radio']:checked).length == 0 ? 没有任何单选框被选中 : 已经有选中;  
$('input[type=radio][name=radio]:checked').val();                         // 获取一组radio被选中项的值  
$(input[type='radio'][name='radio'][value='2']).attr(checked, checked); // 设置value = 2的一项为选中  
$(#radio2).attr(checked, checked);                                      // 设置id=radio2的一项为选中  
$(input[type='radio'][name='radio']).get(1).checked = true;                 // 设置index = 1，即第二项为当前选中  
var isChecked = $(#radio2).attr(checked);                                 // id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false;  
var isChecked = $(input[type='radio'][name='radio'][value='2']).attr(checked);   // value=2的一项处于选中状态则isChecked = true, 否则isChecked = false;

3 select

select操作相比checkbox和radio要相对麻烦一些，我们仍然以下面的html为例来说明：

<select name=select id=select_id style=width: 100px;>  
    <option value=1>11</option>  
    <option value=2>22</option>  
    <option value=3>33</option>  
    <option value=4>44</option>  
    <option value=5>55</option>  
    <option value=6>66</option>  
</select>

看select的如下属性：

    $(#select_id).change(function(){                         // 1.为Select添加事件，当选择其中一项时触发   
        //code...  
    });  
    var checkValue = $(#select_id).val();                    // 2.获取Select选中项的Value  
    var checkText = $(#select_id :selected).text();          // 3.获取Select选中项的Text   
    var checkIndex = $(#select_id).attr(selectedIndex);    // 4.获取Select选中项的索引值,或者：$(#select_id).get(0).selectedIndex;  
    var maxIndex =$(#select_id :last).get(0).index;          // 5.获取Select最大的索引值
    /** 
     * jQuery设置Select的选中项 
     */  
    $(#select_id).get(0).selectedIndex = 1;                  // 1.设置Select索引值为1的项选中  
    $(#select_id).val(4);                                    // 2.设置Select的Value值为4的项选中  
    $(.selector).find(option[text='pxx']).attr(selected,true); // 3.设置某个option为selected
    /** 
     * jQuery添加/删除Select的Option项 
     */  
    $(#select_id).append(<option value='新增'>新增option</option>);    // 1.为Select追加一个Option(下拉项)   
    $(#select_id).prepend(<option value='请选择'>请选择</option>);   // 2.为Select插入一个Option(第一个位置)  
    $(#select_id).get(0).remove(1);                                      // 3.删除Select中索引值为1的Option(第二个)  
    $(#select_id :last).remove();                                        // 4.删除Select中索引值最大Option(最后一个)   
    $(#select_id [value='3']).remove();                                  // 5.删除Select中Value='3'的Option   
    $(#select_id).empty();             

   $(#select_id).find(option:selected).text(); // 获取select 选中的 text :

   $(#select_id).val(); // 获取select选中的 value:

     $(#select_id).get(0).selectedIndex; // 获取select选中的索引:

 //设置select 选中的value：
    $(#select_id).attr(value,Normal);
    $(#select_id).val(Normal);
    $(#select_id).get(0).value = value;

 //设置select 选中的text，通常可以在select回填中使用
var numId=33 //设置text==33的选中！
var count=$(#select_id  option).length;
  for(var i=0;i<count;i++)  
     {           if($(#select_id).get(0).options[i].text == numId)  
        {  
            $(#select_id).get(0).options[i].selected = true;  
            break;  
        }  
    }

通过上面的总结，应该对jquery的checkbox,radio和select有了一定的了解了吧，温故而知新，用多了就会变的熟练起来，即使有时候忘记了，也可以来翻一翻！

4 参考资料

1. jquery的checkbox,radio,select等方法总结
2. jQuery 中 attr() 和 prop() 方法的区别
3. jQuery的attr与prop
4. Setting “checked” for a checkbox with jQuery?