• prop和attr的比较


    prop来获取或设置固有属性  removeProp()  删除固有属性

    attr来获取或设置自定义属性     removeAttr() 删除自定义属性

    案例:全选与全不选

    <body>
    <table border="1" cellpadding="5" cellspacing="0">
    <thead>
    <tr>
    <th><input type="checkbox" id="theadCheckbox"/>id</th>
    <th>姓名</th>
    <th>性别</th>
    <th>电话</th>
    <th>年龄</th>
    </tr>
    </thead>
    <tbody id="tbodyCheckbox">
    <tr>
    <td><input type="checkbox" id="" value="" name="boxs"/>1</td>
    <td>张三</td>
    <td>男</td>
    <td>18210528452</td>
    <td>20</td>
    </tr>
    <tr>
    <td><input type="checkbox" id=" " value=" " name="boxs"/>2</td>
    <td>张三</td>
    <td>男</td>
    <td>18210528452</td>
    <td>20</td>
    </tr>
    <tr>
    <td><input type="checkbox" id="" value="" name="boxs"/>3</td>
    <td>张三</td>
    <td>男</td>
    <td>18210528452</td>
    <td>20</td>
    </tr>
    <tr>
    <td><input type="checkbox" id=" " value=" " name="boxs"/>4</td>
    <td>张三</td>
    <td>男</td>
    <td>18210528452</td>
    <td>20</td>
    </tr>
    <tr>
    <td><input type="checkbox" id="" value="" name="boxs"/>5</td>
    <td>张三</td>
    <td>男</td>
    <td>18210528452</td>
    <td>20</td>
    </tr>
    </tbody>
    </table>

    </body>

    <script>

     $("#theadCheckbox").click(function(){

    var flag=$(this).is(":checked");

    if(flag){

    $("#tbodyCheckbox").find(":checkbox").prop("checked",true) 

    }else{

    $("#tbodyCheckbox").find(":checkbox").removeAttr("checked")

    })

    $("#tbodyCheckbox").find(":checkbox").click(function(){

    var checkedLength=$("#tbodyCheckbox").find(":checked").length;

    var checkboxLength=$("#tbodyCheckbox").find(":checkbox").length;

    if(checkboxLength==checkedLength){

    $("#theadCheckbox").prop("checked",true)

    }else{

    $("#theadCheckbox").removeAttr("checked")

    </script>

  • 相关阅读:
    IOS中浏览器修改document.title不起作用
    he content must be served over HTTPS 解决方案
    Nuxt开发经验分享
    Nuxt插件-axios封装
    requestAnimationFrame & 定时器
    Vue 组件中data为什么是函数
    js-鸡兔同笼方程
    css技巧-清明追思-网站置灰
    详细分享TortoiseGit配置密钥的方法
    js
  • 原文地址:https://www.cnblogs.com/zousaili/p/8268249.html
Copyright © 2020-2023  润新知