使用jQuery实现单选框和复选框以及select

一、jquery实现单选框并选中value=”2”的项：
html代码：

<input type="radio" name="radio" value="1" />1<input type="radio" name="radio" value="2" />2<input type="radio" name="radio" value="3" />3

js代码实现：

jQuery("input[type='radio'][name='radio'][value='2']").attr('checked','checked');

二、jQuery实现复选框

<input type='checkbox' name='checkbox' id='checkAll' />全选/取消全选<input type='checkbox' name='checkbox' id='check_id1' value='1' />1<input type='checkbox' name='checkbox' id='check_id2' value='2' />2<input type='checkbox' name='checkbox' id='check_id3' value='3' />3<input type='checkbox' name='checkbox' id='check_id4' value='4' />4

js代码实现：

var val = jQuery("#checkbox_id1").val();  // 获取指定id的复选框的值var isSelected = jQuery("#checkbox_id2").attr("checked",true); // 选中id为checkbox_id2的复选框jQuery("input[name='checkbox'][type='checkbox']").get(2).checked = true; // 设置index=2即第三项为选中状态。jQuery("input[type='checkbox']:checked").each(function(){      alert(jQuery(this).val());});// 实现多选/取消多选jQuery(function(){    jQuery("checkAll").click(function(){        if(jQuery(this).attr('checked')==true){            jQuery("input[name='checkbox'][type='checkbox']").each(function(){                jQuery(this).attr('checked',true);            });        } else {            jQuery("input[type='checkbox'][name='checkbox']").each(function(){                jQuery(this).attr("checked",false);            });        }    });});

三、select下拉框

<select name='select' id='select_id'>    <option value='1' >1</option>    <option value='2' >2</option>    <option value='3' >3</option>    <option value='4' >4</option></select>

js代码：

jQuery("#select_id").change(function(){    // 为select添加事件});var checkValue = jQuery('#select_id').val(); // 获取选中项的valuevar checkText = jQuery('#select_id').text(); var checkIndex = jQuery('select_id').attr('selectedIndex');  // 获取选中项的索引值// 或者 jQuery('select_id').get(0).selectedIndex;var maxIndex = jQuery('select_id:last').attr('selectedIndex'); // 获取select最大索引值// 或者： jQuery('#select_id').get(0).index;// jQuery设置select选中项jQuery('#select_id').get(0).selectIndex = 1; // 设置select索引值为1的项选中jQuery('#select_id').val(4); // 选中value值为4的项选中//jQuery添加/删除option项jQuery('#select_id').append('<option value = '5'>5</option>'); // 在最后(最后一个位置追加)新增一个optionjQuery('#select_id').prepend('<option value = '0'>0</option>'); //在最前面(第一个位置插入)新增一项optionjQuery('#select_id').get(0).remove(); // 删除索引值为1的项，即第一项jQuery('#select_id:last').remove(); // 删除最后一项jQuery('#select_id[value='3']').remove(); // 删除value值为3的项jQuery('#select_id').empty();  // 清空id为select_id的select