黑马程序员技术交流社区

标题: 不足20行JS代码的表单全选效果 [打印本页]

---

作者: 逆风TO    时间: 2020-2-5 10:41
标题: 不足20行JS代码的表单全选效果

病毒横行，在家继续学习~

今天做一个不到20行 JS 代码的全选特效。先看效果：

一、HTML 和 CSS

[JavaScript] 纯文本查看 复制代码

*{

    margin: 0;

    padding: 0;

}

input{

    vertical-align: middle;

}

.head{

    width: 500px;

    margin-left: auto;

    margin-right: auto;

    margin-top: 100px;

    padding-bottom: 10px;

}

.content{

    width: 500px;

    margin-left: auto;

    margin-right: auto;

}

.content td{

    border-bottom:1px #666 dashed;

    padding-top: 10px;

    padding-bottom: 10px;

}

[JavaScript] 纯文本查看 复制代码

<div class="head">

    <label class="myradio" id="chooseAll">

        <input type="checkbox" name="chooseAll">

        <span>全选</span>

    </label>

 

</div>

<div class="content" id="content">

    <table width="100%" cellpadding="0" cellspacing="0" border="0">

        <tr>

            <td width="50">

                <label class="choose_item_label">

                    <input type="checkbox" class="choose_item">

                </label>

            </td>

            <td>

                模拟内容

            </td>

        </tr>

 

        <tr>

            <td width="50">

                <label class="choose_item_label">

                    <input type="checkbox" class="choose_item">

                </label>

            </td>

            <td>

                模拟内容

            </td>

        </tr>

 

        <tr>

            <td width="50">

                <label class="choose_item_label">

                    <input type="checkbox" class="choose_item">

                </label>

            </td>

            <td>

                模拟内容

            </td>

        </tr>

    </table>

</div>

关键代码解释：
1、让 input 标签跟同行的文字上下居中对齐。
input{
    vertical-align: middle;
}
2、input 标签，习惯性的放在一个 label 标签里，方便点击。

3、“全选”的input 一个独立的 id。其他 input 则用同一个 class，方便选择它们。

4、内容较多，为了省事，就用 table 布局。

二、JS 代码

[JavaScript] 纯文本查看 复制代码

let chooseAll = document.getElementById("chooseAll");

let content = document.getElementById("content");

let itemLabel = content.querySelectorAll(".choose_item_label");

let chooseAllFun = function(){

    for(let i=0 ; i <= itemLabel.length-1 ; i++ ){

        itemLabel.children[0].checked = chooseAll.children[0].checked;

    }

};

chooseAll.addEventListener("click",chooseAllFun);

let chooseItemFun = function(){

    if( !this.children[0].checked ){

        chooseAll.children[0].checked = false ;

    }

};

for( let i=0 ; i<= itemLabel.length-1 ; i++ ){

    itemLabel.addEventListener("click", chooseItemFun);

}

关键代码解释：

1、找到 content 里面所有的 input 标签。利用类名去找。

let itemLabel = content.querySelectorAll(".choose_item_label");
2、点击 “全选” input 的label，执行事件代码 chooseAllFun。

无论是“全选状态”，还是“全不选”状态，内容 input 的 checked 状态始终都跟 “全选” input 状态一致。所以，可以轻松实现全选效果。

3、点击内容中的 input，只要任意一个 input 没有被选中，那么就不属于“全选”状态，此时“全选”input 的 checked 就要为 false，未被选中状态。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2