对html中的checkbox元素的操作也是写网站和Web程序中常用的操作,在这里总结下对checkbox的取值、赋值、遍历、全选、全不选、反选等常用操作的代码。
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.checkbox全选
$('input:checkbox').each(function() { $(this).attr('checked', true); });
12.checkbox全部取消选中
$('input:checkbox').each(function () { $(this).attr('checked',false); });
13.示例代码
<div> <input name="chk" type="checkbox" value="大众" />大众 <input name="chk" type="checkbox" value="通用" />通用 <input name="chk" type="checkbox" value="福特" />福特 <input name="chk" type="checkbox" value="长安" />长安 <input name="chk" type="checkbox" value="吉利" />吉利 <input name="chk" type="checkbox" value="长城" />长城 <input name="chk" type="checkbox" value="比亚迪" />比亚迪 </div> <div> <input id="btnChkAll" type="button" value="全选" /> <input id="btnChkNone" type="button" value="全不选" /> <input id="btnChkReverse" type="button" value="反选" /> <input id="btnSubmit" type="button" value="提交" /> </div> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // 全选 $("#btnChkAll").bind("click", function () { $("[name = chk]:checkbox").attr("checked", true); }); // 全不选 $("#btnChkNone").bind("click", function () { $("[name = chk]:checkbox").attr("checked", false); }); // 反选 $("#btnChkReverse").bind("click", function () { $("[name = chk]:checkbox").each(function () { $(this).attr("checked", !$(this).attr("checked")); }); }); // 全不选 $("#btnSubmit").bind("click", function () { var result = new Array(); $("[name = chk]:checkbox").each(function () { if ($(this).is(":checked")) { result.push($(this).attr("value")); } }); console.log(result.join(",")); }); }); </script>
评论前必须登录!
注册