jQuary学习之单选框和复选框

在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。

单选框 radio

语法

<input type="radio" value="值" name="名称" checked="checked"/>

设置选中方法

$("input[name='名字']").get(0).checked=true; 
$("input[name='名字']").attr('checked','true');
$("input[name='名字']:eq(0)").attr("checked",'checked'); 
$("input[name='radio_name'][checked]").val();  //获取被选中Radio的Value值

设置选中和不选中示例

<input type="radio" value="0" name="jizai" id="0"/>否
<input type="radio" value="1" name="jizai"  id="1"/>是

// jquery中，radio的选中与否是这么设置的。
$("#rdo1").attr("checked","checked");
$("#rdo1").removeAttr("checked");

// 在html页面中
<script type="text/javascript">  
$(document).ready(function(){  
        $("input[@type=radio][name=sex][@value=1]").attr("checked",true);  
});  
</script>  

通过name

$("input:radio[name="analyfsftype"]").eq(0).attr("checked",'checked');
$("input:radio[name="analyshowtype"]").attr("checked",false);

通过id

$("#tradeType0").attr("checked","checked");
$("#tradeType1").attr("checked",false);

根据值设置radio选中

$("input[name='radio_name'][value='要选中Radio的Value值']").attr("checked",true);  //根据Value值设置Radio为选中状态

使用prop方法操作示例

$('input').removeAttr('checked'); 
$($('#'+id+'input').eq(0)).prop('checked',false);
$($('#'+id+' input').eq(0)).prop('checked',true);

获取radio的选中值

$("input[name='radio_name']").val();

复选框

语法

<input type="checkbox" value="值" name="名称" checked="checked"/>

取值

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()); 
   } 
}); 

赋值

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

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

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

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

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

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

选中与不选中

1. 选中多个checkbox：

同时选中第1个和第2个的checkbox：
$('input:radio').slice(0,2).attr('checked','true'); 
$('input:radio').slice(0,2).attr('checked','false'); 

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

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

删除

1. 删除Value=1的checkbox：

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

2. 删除第几个checkbox：

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

全选及不全选

1. 遍历checkbox：

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

2. 全部选中

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

3. 全部取消选择：

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

选中时触发的方法

1. click事件

$("input[name='legend_checkbox']").click(function (){
  // 在此写选中后相应的变化
     });

2. change事件

$("input[name='legend_checkbox']"). change(function (){
  // 在此写选中后相应的变化
     });