在使用表單設(shè)計(jì)調(diào)查表時(shí)，為了減少用戶的操作，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。

單選框 radio

語法

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

設(shè)置選中方法

$("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值

設(shè)置選中和不選中示例

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

// jquery中，radio的選中與否是這么設(shè)置的。
$("#rdo1").attr("checked","checked");
$("#rdo1").removeAttr("checked");

// 在html頁(yè)面中
<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);

根據(jù)值設(shè)置radio選中

$("input[name='radio_name'][value='要選中Radio的Value值']").attr("checked",true);  //根據(jù)Value值設(shè)置Radio為選中狀態(tài)

使用prop方法操作示例

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

獲取radio的選中值

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

復(fù)選框

語法

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

取值

1. 獲取單個(gè)checkbox選中項(xiàng)(三種寫法)：

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

2. 獲取多個(gè)checkbox選中項(xiàng)：

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

賦值

1. 設(shè)置第一個(gè)checkbox 為選中值：

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

2. 設(shè)置最后一個(gè)checkbox為選中值：

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

3. 根據(jù)索引值設(shè)置任意一個(gè)checkbox為選中值：

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

選中與不選中

1. 選中多個(gè)checkbox：

同時(shí)選中第1個(gè)和第2個(gè)的checkbox：
$('input:radio').slice(0,2).attr('checked','true'); 
$('input:radio').slice(0,2).attr('checked','false'); 

2. 根據(jù)Value值設(shè)置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. 刪除第幾個(gè)checkbox：

$("input:checkbox").eq(索引值).remove();索引值=0,1,2.... 
如刪除第3個(gè)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); 
});

選中時(shí)觸發(fā)的方法

1. click事件

$("input[name='legend_checkbox']").click(function (){
  // 在此寫選中后相應(yīng)的變化
     });

2. change事件

$("input[name='legend_checkbox']"). change(function (){
  // 在此寫選中后相應(yīng)的變化
     });