摘要:<!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
老师总结:嗯!不错!但是缺少自己的总结!下次记得带上,课后还得多多练习啊!!