zoukankan      html  css  js  c++  java
  • checkbox中checked属性总结【转】

    一、checked属性定义和用法


    1.checked属性是一个布尔属性

    2.checked属性规定在页面加载时应该被预先选定的<input>元素

    3.checked属性适用于<input type="checkbox"><input type="radio">

    4.checked属性也可以在页面加在后,通过JavaScript代码进行设置

    attr()/prop()方法设置或返回被选元素的属性和值,当该方法用于返回属性值时,则返回第一个匹配元素的值,当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。例如:$("#input").attr({"160",height:"180"});

     

    二、checked属性的用法


    操作checked、disabled、selected属性,建议只用prop()方法,不要使用attr()方法。

    1.Jquery判断checked是否选中状态的三种方法:

    1>.attr("checked") //返回:"checked" 或 "undefined"

    2>.prop("checked") //返回 true/false

    3>.is(":checked") //返回 true/false

    2.Jquery使用attr属性赋值checked

    1> $("input[type='checked']").attr("checked","checked"); //通用

    2> $("input[type='checked']").attr("checked",false); //不标准

    3> $("input[type='checked']").attr("checked","false"); //不标准

    3.Jquery使用prop属性赋值checked

    1> $("input[type='checked']").prop("checked",true); //标准写法

    2> $("input[type='checked']").prop({cheked:true}); //map键值对

    3> $("input[type='checked']").prop("checked",funtion(){ return true; }); //函数返回true或false

    4> $("input[type='checked']").prop("checked","checked"); //不标准

    4.获取单个checkbox选中项的值

    1>$("#chx1").find("input:checkbox:checked").val()

    2>$("#chx1").find("input[type='checkbox']:checked").val()

    3>$("#chx1").find("input:[type='checkbox']:checked").val()

    4>$("#chx1").find("input[name='ck']:checked").val()

    5>$("#chx1").find("input:[name='ck']:checked").val()

    5.勾选或取消

    function check(id,check){
        if(check){
            $("."+id).find("input:[type='checkbox']").prop("checked",true);
        }else{
            $("."+id).find("input[type='checkbox']").prop("checked",false);
        }
    }
    

    6.获取多个checkbox选中项

    $("#chk1").find("input:checkbox").each(function(){
        if($(this).prop('checked')==true){
            console.log($(this).val());
        }
     
    });
    

    7.设置第一个checkbox为选中值

    $("#chk1").find("input:checkbox:first").prop("checked",true);
    $("#chk1").find("input:checkbox").eq(0).prop("checked",true);
    

    8.设置最后一个checkbox为选中值

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

    9.选中所有奇数或偶数项

    $("#chk1").find("input:[type='checkbox']:even").prop("checked",true);
    $("#chk1").find("input[type='checkbox']:odd").prop("checked",true);
    

    10.根据索引值设置任意一个checkbox为选中值

    $("#chk1").find('input:checkbox').eq(索引值).prop("checked",true);
    $("#chk1").find("input:checkbox").slice(1,2).prop("checked",true);//同时选中第0个和第1个checkbox
    

    11.根据value值设置checkbox为选中值

    $("#chk1").find("input:checkbox[value='1']").prop('checked',true);
    $("#chk1").find("input:[type='checked'][value='1']").prop('checked',true);
    

     
    文章转自:https://blog.csdn.net/chaoyue1861/article/details/83752870

  • 相关阅读:
    MongoDb
    js暴露内部方法属性等
    JS闭包
    k8s设计模式
    scrum
    死锁
    Linux下安装php 扩展fileinfo
    linux中whereis、which、find、location的区别和用法
    Linux 命令学习记录
    windows 下 redis 的安装及使用
  • 原文地址:https://www.cnblogs.com/KillBugMe/p/12706902.html
Copyright © 2011-2022 走看看