在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，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"/>
取值
- 获取单个checkbox选中项(三种写法)：
$("input:checkbox:checked").val()
$("input:[type='checkbox']:checked").val();
$("input:[name='ck']:checked").val();
- 获取多个checkbox选中项：
$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});
赋值
- 设置第一个checkbox 为选中值：
$('input:checkbox:first').attr("checked",'checked');
$('input:checkbox').eq(0).attr("checked",'true');
- 设置最后一个checkbox为选中值：
$('input:radio:last').attr('checked', 'checked');
$('input:radio:last').attr('checked', 'true');
- 根据索引值设置任意一个checkbox为选中值：
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
$('input:radio').slice(1,2).attr('checked', 'true');
选中与不选中
- 选中多个checkbox：
同时选中第1个和第2个的checkbox：
$('input:radio').slice(0,2).attr('checked','true');
$('input:radio').slice(0,2).attr('checked','false');
- 根据Value值设置checkbox为选中值：
$("input:checkbox[value='1']").attr('checked','true');
$("input:checkbox[value='1']").attr('checked','false');
删除
- 删除Value=1的checkbox：
$("input:checkbox[value='1']").remove();
- 删除第几个checkbox：
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();
全选及不全选
- 遍历checkbox：
$('input:checkbox').each(function (index, domEle) {
//写入代码
});
- 全部选中
$('input:checkbox').each(function() {
$(this).attr('checked', true);
});
- 全部取消选择：
$('input:checkbox').each(function () {
$(this).attr('checked',false);
});
选中时触发的方法
- click事件
$("input[name='legend_checkbox']").click(function (){
// 在此写选中后相应的变化
});
- change事件
$("input[name='legend_checkbox']"). change(function (){
// 在此写选中后相应的变化
});
