jQuery 复选框 checkbox 取值和赋值

  1. 获取单个checkbox选中项(三种写法):
$("input:checkbox:checked").val() 
// 或者 
$("input:[type='checkbox']:checked").val(); 
// 或者 
$("input:[name='ck']:checked").val(); 
  1. 获取多个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'); 
  1. 设置最后一个checkbox为选中值:
$('input:radio:last').attr('checked', 'checked'); 
// 或者 
$('input:radio:last').attr('checked', 'true');
  1. 根据索引值设置任意一个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'); 
  1. 根据Value值设置checkbox为选中值:
$("input:checkbox[value='1']").attr('checked','true');
  1. 删除Value=1的checkbox:
$("input:checkbox[value='1']").remove();
  1. 删除第几个checkbox:
$("input:checkbox").eq(索引值).remove(); //索引值=0,1,2.... 
// 如删除第3个checkbox: 
$("input:checkbox").eq(2).remove();

10.遍历checkbox:

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

11.全部选中

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

12.全部取消选择:

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

13.给 checked 赋值:

 $("#cb1").attr("checked","checked");
 $("#cb1").attr("checked",true);

jquery1.6+:prop的4种赋值:

$("#cb1″).prop("checked",true); // 很简单就不说了哦 $("#cb1″).prop({checked:true}); // map键值对
$("#cb1″).prop("checked",function(){
  return true; // 函数返回true或false
});
// 记得还有这种:
$("#cb1″).prop("checked","checked");

示例:必须选则其中一个选项

<div class="right">
           <label>
              <input type="checkbox" value="1" name="love"/>
           </label>
           运动&nbsp;&nbsp;
           <label>
              <input type="checkbox" value="2" name="love"/>
           </label>
           聊天&nbsp;&nbsp;
           <label>
              <input type="checkbox" value="3" name="love"/>
           </label>
           玩游戏
</div>

<script>
$(function() {
         $("#submit").on("click", function() {var arr = []
            if($(":checkbox:checked").length == 0){
               alert("请选择一项爱好");
               return false;
            }else{
               $.each($('input:checkbox:checked'),function(){
                  arr.push($(this).val())
               });
            }
            console.log(arr)
            alert('activityType:' + arr)
         })
})
</script>

示例:通过遍历数组给checkbox赋默赋值

<div class="right">
           <label>
              <input type="checkbox" value="1" name="love"/>
           </label>
           运动&nbsp;&nbsp;
           <label>
              <input type="checkbox" value="2" name="love"/>
           </label>
           聊天&nbsp;&nbsp;
           <label>
              <input type="checkbox" value="3" name="love"/>
           </label>
           玩游戏
</div>

<script>
$(function() {
    var checklist = ['1', '3']
    if (checklist) {
       $.each(checklist, function(i,item){
          $("input[name='love'][value="+item+"]").attr("checked","checked");
       });
    }
})
</script>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值