复选框全选与全不选操作实现思路_全选和全不选资源-CSDN文库

111 浏览量 2020-09-05 02:17:09 上传评论收藏 22KB PDF 举报

资源推荐

资源详情

资源评论

复选框全选与全不选操作实现思路复选框全选与全不选操作实现思路

通过js简单实现下复选框全选与全不选，很常用的一个操作，具体实现思路及代码如下，有需求的朋友可以参考

下，希望对大家有所帮助

复制代码代码如下:

<SPAN style="FONT-SIZE: 14px"><!DOCTYPE html>

<html>

<head>

<title>复选框处理.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

<input type="checkbox" id="checkItem">全选/全不选

<br>

<h3>爱好</h3>

<input type="checkbox" name="item">看书

<br>

<input type="checkbox" name="item">听音乐

<br>

<input type="checkbox" name="item">打球

<br>

<input type="checkbox" name="item">散步

<br>

<input type="checkbox" name="item">写代码

<br>

<script>

window.onload = function(){

var checkItem = document.getElementById("checkItem").onclick = function(){

var itemsElement = document.getElementsByName("item");

for (var i = 0; i < itemsElement.length; i++) {

var itemElement = itemsElement[i];

if (this.checked) {

itemElement.checked = "checked";

}

else {

itemElement.checked = null;

}

}

}

}

</script>

</body>

</html>

</SPAN>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

内容反馈

weixin_38608866

粉丝: 7
资源: 915

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip