前端

DOM操作_checked

微信扫一扫,分享到朋友圈

DOM操作_checked
收藏 0 0

1、jQuery判断checked是否是选中状态方法

$(“#cb1”)..prop(‘checked’) // 返回true/false
2、jQuery设置checked为选中/不选中状态方法

$(“#cb1”).prop(“checked”,true); //选中
$(“#cb1”).prop(“checked”,false); //不选中
3、jQuery设置checked为全选中状/全不选中态方法
function check(id,check) {
    if (check) {
       $(‘input[name=”cbCheckBox”]’).prop(‘checked’, true);//全选
    } else {
        //$(‘input[name=”cbCheckBox”]’).prop(‘checked’, false);//取消全选
        $(‘input[name=”cbCheckBox”]’)..removeAttr(“checked”);
    }

}
4、jQuery获取单个checked的值
$(“#chx1”).find(“input:checkbox:checked”).val()
//或者

$(“#chx1”).find(“input[type=’checkbox’]:checked”).val();
//或者
$(“#chx1”).find(“input:[name=’ck’]:checked”).val();

5、jQuery获取多个checked的值

$(“#chk1”).find(‘input:checkbox’).each(function() { //遍历所有复选框
    if ($(this).prop(‘checked’) == true) {
        console.log($(this).val()); //打印当前选中的复选框的值
    }
});
function getCheckBoxVal(){ //jquery获取所有选中的复选框的值
    var chk_value =[];
    $(“#chk1″).find(‘input[name=”test”]:checked’).each(function(){ //遍历,将所有选中的值放到数组中
        chk_value.push($(this).val());
    });
    alert(chk_value.length==0 ?’你还没有选择任何内容!’:chk_value);

}
6、设置第一个  或最后一个选中

$(“#chk1”).find(‘input:checkbox:first’).prop(“checked”,true);
//或者

$(“#chk1”).find(‘input:checkbox’).eq(0).prop(“checked”,true);
============================================

$("#chk1").find('input:checkbox:last').prop("checked",

true

);

7、根据value值设置checkbox为选中值

$(“#chk1”).find(“input:checkbox[value=’1′]”).prop(‘checked’,true);

$(“#chk1”).find(“input[type=’checkbox’][value=’1′]”).prop(‘checked’,true); 8、删除checkbox:①删除value=1的checkbox ②删除第几个checkbox

$("#chk1").find("input:checkbox[value='1']").remove(); //将匹配元素从DOM中删除,将标签从页面上删除了
$(“#chk1”).find(“input:checkbox”).eq(index).remove(); //索引值 index=0,1,2….
//如删除第3个checkbox:
$("#chk1").find("input:checkbox").eq(2).remove();

9、全部选中或全部取消选中


$(“#chk1”).find(‘input:checkbox’).each(function() {
    $(this).prop(‘checked’, true);
});
//或者
$(“#chk1”).find(‘input:checkbox’).each(function () {
    $(this).prop(‘checked’,false);

});

10、选中所有奇数项或偶数项
$(“#chk1”).find(“input[type=’checkbox’]:even”).prop(“checked”,true); //选中所有偶数

$(“#chk1”).find(“input[type=’checkbox’]:odd”).prop(“checked”,true); //选中所有奇数

11、反选
$(“#btn4”).click(function(){
    $(“input[type=’checkbox’]”).each(function(){ //反选
         if($(this).prop(“checked”)){
             $(this).prop(“checked”,false);
          } else{
             $(this).prop(“checked”,true);
         }
    });
});
==============================
$(“#btn4”).on(‘click’,function(){
//反选所有的复选框(没选中的改为选中,选中的改为取消选中)
    $(“#chk1”).find(“input[type=’checkbox’]”).prop(“checked”, function(index, oldValue){
        return !oldValue;
    });

}

展开阅读全文
干一件事情,用心干就完了

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

分类目录

微信扫一扫

微信扫一扫