• 实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中


    上图是实现效果。

    下面贴代码

    表的第一行也就是<th>中的代码,onclick事件是实现全选或者全不选效果。

    <th>
    <input id="allboxs" onclick="allcheck()" type="checkbox"/>
    </th>

    td中的代码

    <td>
    <input  name="boxs" type="checkbox"/>
    </td>

    js中实现全选、全不选效果

    复制代码
    function allcheck() {
                 var nn = $("#allboxs").is(":checked"); //判断th中的checkbox是否被选中,如果被选中则nn为true,反之为false
                     if(nn == true) {
                         var namebox = $("input[name^='boxs']");  //获取name值为boxs的所有input
                         for(i = 0; i < namebox.length; i++) {
                             namebox[i].checked=true;    //js操作选中checkbox
                         }
                     }
                     if(nn == false) {
                         var namebox = $("input[name^='boxs']");
                         for(i = 0; i < namebox.length; i++) {
                             namebox[i].checked=false;
                         }
                     }
                 }
    复制代码

    以上代码值得一提的是,获取checkbox的值或其他的什么,建议用name属性值操作,因为id属性在每一个页面中默认是唯一的,而name属性则可以取到属性值相同的所有。

  • 相关阅读:
    C++PRIMER 阅读笔记 第三章
    一个for循环打印二维数组
    递归实现数组求和
    strlen 与 sizeof
    call,apply,bind,this
    js 原型继承
    vue 动画
    vuex学习心得
    vue+elementui dropdown 下拉菜单绑定方法
    vue 生命周期一点学习
  • 原文地址:https://www.cnblogs.com/jpfss/p/7656324.html
Copyright © 2020-2023  润新知