JS实例-全选练习

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="post">
    <label for="checkedAllBox">你爱好的运动是？</label><input type="checkbox" id="checkedAllBox"/>全选/全不选
    <br/>
<!--定义了复选框type="checkbox". 用户需要从若干给定的选择中选取一个或若干选项。-->
    <label>
        <input type="checkbox" name="items" value="足球"/>
        足球
    </label>
    <label>
        <input type="checkbox" name="items" value="蓝球"/>
        蓝球
    </label>
    <label>
        <input type="checkbox" name="items" value="羽毛球"/>
        羽毛球
    </label>
    <label>
        <input type="checkbox" name="items" value="乒乓球"/>
        乒乓球
    </label>
    <br/>
    <input type="button" id="checkedAllBtn" value="全 选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反 选"/>
    <input type="button" id="sendBtn" value="提 交"/>
</form>
</body>
</html>
<script>
    function myClick1(idStr,fun){
        //全选/全不选框的地址
        var checkedAllBox=document.getElementsByName("checkedAllBox");
        // 全选按钮：点击按钮之后，四个多选框全都被选中
        const btn=document.getElementById(idStr);
        btn.onclick=fun;
    }
    // 全选框
        myClick1("checkedAllBtn",function () {
            var items=document.getElementsByName("items");
            //items为一个数组，需要遍历
            for(let i=0;i<items.length;i++){
                //设置四个多选框变成选中状态
                //通过多选框的checked属性获取或设置多选框的选中状态
                items[i].checked=true;
            }
            checkedAllBox.checked=true;
        });
        // 全不选按钮：点击之后，四个多选框全都不被选中
        myClick1("checkedNoBtn",function () {
            var items = document.getElementsByName("items");
            for(let i=0;i<items.length;i++){
                items[i].checked=false;
            }
            checkedAllBox.checked=false;
        });
    // 反选：点击之后选中的变成没选中，没选中的选中
    myClick1("checkedRevBtn",function () {
var items=document.getElementsByName("items")
        for(let i=0;i<items.length;i++){
          /*  if(items[i].checked===false){
                items[i].checked=true;
            }
            else{
                items[i].checked=false;
            }*/
            //反选时也需要判断四个多选框是否全部选中
          items[i].checked=!items[i].checked;
            checkedAllBox.checked=true;
            //判断四个多选框是否全选,只要有一个没选中就不是全选
            for(let j=0;j<items.length;j++) {
                if (!items[j].checked) {
                    // 一旦进入判断，则证明不是全选状态
                    // 将checkedAllBox设置为没选中
                    checkedAllBox.checked = false;
                }
            }
        }
       /* checkedAllBox.checked=true;
        for(let j=0;j<items.length;j++){
            //判断四个多选框是否全选,只要有一个没选中就不是全选
            if(!items[j].checked){
                // 一旦进入判断，则证明不是全选状态
                //    将checkedAllBox设置为没选中
                checkedAllBox.checked=false;
                break;
            }
        }*/
    });
    // 提交按钮:点击之后所有多选框的value属性值弹出
    myClick1("sendBtn",function () {
var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
    if(items[i].checked===true){
        alert(items[i].value)}}
    });
    //全选中或全不选中
    myClick1("checkedAllBox",function () {
        var items=document.getElementsByName("items");
for(let i=0;i<items.length;i++){
   // items[i].checked=checkedAllBox.checked;
    items[i].checked=this.checked;
}
    });
/*如果四个多选框全都选中，则checkAllBox也应该选中
    如果四个多选框全都不选中，则checkAllBox也应该不选中*/
//为四个多选框分别绑定点击响应函数
    var items=document.getElementsByName("items");
    for(let i=0;i<items.length;i++){
        items[i].onclick=function () {
            checkedAllBox.checked=true;
            for(let j=0;j<items.length;j++){
                //判断四个多选框是否全选,只要有一个没选中就不是全选
                if(!items[j].checked){
                    // 一旦进入判断，则证明不是全选状态
                //    将checkedAllBox设置为没选中
                    checkedAllBox.checked=false;
                    break;
                }
            }
        }
    }
</script>
巴特西

JS实例-全选练习

最新文章

热门文章
