[技术面试] 不足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[i].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[i].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，未被选中状态。

帐号		自动登录	找回密码
密码			加入黑马

[技术面试] 不足20行JS代码的表单全选效果

0 个回复