实现全选并生成列表ID字符串

原创2018-11-16 11:04:08144
摘要:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8" />     <title>列表文章全选生成列成ID </title> &n
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>列表文章全选生成列成ID </title>
    <style type="text/css">
        .test{margin:5px auto; width:200px;height:300px;background:#fff;border:1px solid #000;border-radius:10px;}
        .inner{margin:8px 5px; border-bottom:1px #ccc solid;}
        .inner input{padding:8px 8px;}
        .innerlist{margin:5px 5px;}
        .innerlist input{padding:8px 8px;}
    </style>
    <script type="text/javascript">
        function checkall(){
            var checkitem,item,val="";
            checkitem=document.getElementById('checkall');
            item=document.getElementsByName('item[]');
            //document.write(item);//输出后为[object NodeList],用for输出内容
            for (var i = 0; i < item.length; i++) {
                if(checkitem.checked){
                    item[i].checked=true;//设置选择
                    val+=item[i].value + ',';//生成列表ID字符串
                }else{
                    item[i].checked=false;//设置无效
                }
            };
            //document.write(val);可以列表ID输出字符串
        }
    </script>
</head>
<body>
<div class="test">
    <div class="inner">
        <input type="checkbox" id="checkall" onclick="checkall()"> <label for="checkall">全选</label>
    </div>
    <div class="innerlist">
        <input type="checkbox" name="item[]" value="1" /> 新闻列表1
    </div>
    <div class="innerlist">
        <input type="checkbox" name="item[]" value="2" /> 新闻列表2
    </div>
    <div class="innerlist">
        <input type="checkbox" name="item[]" value="3" /> 新闻列表3
    </div>
    <div class="innerlist">
        <input type="checkbox" name="item[]" value="4" /> 新闻列表4
    </div>
</div>
</body>
</html>


批改老师:韦小宝批改时间:2018-11-16 11:06:20
老师总结:嗯!不错!但是缺少自己的总结!下次记得带上,课后还得多多练习啊!!

发布手记

热门词条