jquery 操作checkbox、radio、select 小结

jquery radio的操作：

<input type=\"radio\" name=\"rd\" checked=\"checked\" id=\"rd1\" value=\"rd1\"/>
<input type=\"radio\" name=\"rd\" id=\"rd2\" value=\"rd2\"/>
<input type=\"radio\" name=\"rd\" id=\"rd3\" value=\"rd3\"/>

1.获取选中值，三种方法都可以： 

$(\'input:radio:checked\').val()； 
$(\"input[type=\'radio\']:checked\").val(); 
$(\"input[name=\'rd\']:checked\").val(); 

2.设置第一个Radio为选中值： 

$(\'input:radio:first\').attr(\'checked\', \'checked\'); 
或者 
$(\'input:radio:first\').attr(\'checked\', \'true\');

注： attr("checked",'checked')= attr("checked", 'true')= attr("checked", true) 

3.设置最后一个Radio为选中值： 

$(\'input:radio:last\').attr(\'checked\', \'checked\'); 
或者 
$(\'input:radio:last\').attr(\'checked\', \'true\'); 

4.根据索引值设置任意一个radio为选中值： 

$(\'input:radio\').eq(索引值).attr(\'checked\', \'true\');索引值=0,1,2.... 
或者 
$(\'input:radio\').slice(1,2).attr(\'checked\', \'true\'); 

5.根据Value值设置Radio为选中值 

$(\"input:radio[value=\'rd2\']\").attr(\'checked\',\'true\'); 
或者 
$(\"input[value=\'rd2\']\").attr(\'checked\',\'true\'); 

6.删除Value值为rd2的Radio 

$(\"input:radio[value=\'rd2\']\").remove(); 

7.删除第几个Radio 

$(\"input:radio\").eq(索引值).remove();索引值=0,1,2.... 
如删除第3个Radio:$(\"input:radio\").eq(2).remove(); 

8.遍历Radio 

$(\'input:radio\').each(function(index,domEle){ 
//写入代码 
}); 

jquery select的操作

<select id=\"sel\">
    <option value=\"1\" selected=\"selected\">a</option>
    <option value=\"2\">b</option>
    <option value=\"3\">c</option>
    <option value=\"4\">d</option>
    <option value=\"5\">e</option>
</select>

1. 获取选中项： 
获取选中项的Value值： 

$(\'select#sel option:selected\').val(); 
或者 
$(\'select#sel\').find(\'option:selected\').val(); 

获取选中项的Text值： 

$(\'select#seloption:selected\').text(); 
或者 
$(\'select#sel\').find(\'option:selected\').text();

 
2. 获取当前选中项的索引值： 

$(\'select#sel\').get(0).selectedIndex; 

3. 获取当前option的最大索引值： 

$(\'select#sel option:last\').attr(\"index\") 

4. 获取DropdownList的长度： 

$(\'select#sel\')[0].options.length; 
或者 
$(\'select#sel\').get(0).options.length; 

5. 设置第一个option为选中值： 

$(\'select#sel option:first\').attr(\'selected\',\'true\') 
或者 
$(\'select#sel\')[0].selectedIndex = 0; 

6. 设置最后一个option为选中值： 

$(\'select#sel option:last).attr(\'selected\',\'true\') 

7. 根据索引值设置任意一个option为选中值： 

$(\'select#sel\')[0].selectedIndex =索引值;索引值=0,1,2.... 

8. 设置Value=4 的option为选中值： 

$(\'select#sel\').attr(\'value\',\'4\'); 
或者 
$(\"select#sel option[value=\'4\']\").attr(\'selected\', \'true\'); 

9. 删除Value=3的option： 

$(\"select#sel option[value=\'3\']\").remove(); 

10.删除第几个option： 

$(\" select#sel option \").eq(索引值).remove();索引值=0,1,2.... 
如删除第3个Radio: 
$(\" select#sel option \").eq(2).remove(); 

11.删除第一个option： 

$(\" select#sel option \").eq(0).remove(); 
或者 
$(\"select#sel option:first\").remove();

 
12. 删除最后一个option： 

$(\"select#sel option:last\").remove(); 

13. 删除dropdownlist: 

$(\"select#sel\").remove(); 

14.在select后面添加一个option: 

$(\"select#sel\").append(\"<option value=\'6\'>f</option>\");

 
15. 在select前面添加一个option: 

$(\"select#sel\").prepend(\"<option value=\'0\'>0</option>\"); 

16. 遍历option： 

$(\' select#sel option \').each(function (index, domEle) { 
//写入代码 
}); 

jquery checkbox的操作

<input type=\"checkbox\" name=\"ck1\" checked=\"checked\" id=\"ck1\" value=\"1\"/>
<input type=\"checkbox\" name=\"ck2\" id=\"ck2\" value=\"2\"/>
<input type=\"checkbox\" name=\"ck3\" id=\"ck3\" value=\"3\"/>
<input type=\"checkbox\" name=\"ck4\" id=\"ck4\" value=\"4\"/>

1. 获取单个checkbox选中项(三种写法)： 

$(\"input:checkbox:checked\").val() 
或者 
$(\"input:[type=\'checkbox\']:checked\").val(); 
或者 
$(\"input:[name=\'ck\']:checked\").val(); 

2. 获取多个checkbox选中项： 

$(\'input:checkbox\').each(function() { 
if ($(this).attr(\'checked\') ==true) { 
alert($(this).val()); 
} 
}); 

3. 设置第一个checkbox 为选中值： 

$(\'input:checkbox:first\').attr(\"checked\",\'checked\'); 
或者 
$(\'input:checkbox\').eq(0).attr(\"checked\",\'true\'); 

4. 设置最后一个checkbox为选中值： 

$(\'input:radio:last\').attr(\'checked\', \'checked\'); 
或者 
$(\'input:radio:last\').attr(\'checked\', \'true\'); 

5. 根据索引值设置任意一个checkbox为选中值： 

$(\'input:checkbox).eq(索引值).attr(\'checked\', \'true\');索引值=0,1,2.... 
或者 
$(\'input:radio\').slice(1,2).attr(\'checked\', \'true\');

 
6. 选中多个checkbox： 
同时选中第1个和第2个的checkbox： 

$(\'input:radio\').slice(0,2).attr(\'checked\',\'true\'); 

7. 根据Value值设置checkbox为选中值： 

$(\"input:checkbox[value=\'1\']\").attr(\'checked\',\'true\'); 

8. 删除Value=1的checkbox： 

$(\"input:checkbox[value=\'1\']\").remove(); 

9. 删除第几个checkbox： 

$(\"input:checkbox\").eq(索引值).remove();索引值=0,1,2.... 
如删除第3个checkbox: 
$(\"input:checkbox\").eq(2).remove(); 

10.遍历checkbox： 

$(\'input:checkbox\').each(function (index, domEle) { 
//写入代码 
}); 

11.全部选中 

$(\'input:checkbox\').each(function() { 
$(this).attr(\'checked\', true); 
}); 

12.全部取消选择

$(\'input:checkbox\').each(function () { 
$(this).attr(\'checked\',false); 
});