JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。

一、Javacript设置全选的方法：首先创建一个HTML示例文件；然后添加script标签并创建js代码；最后通过循环遍历每个checkbox对象，将其checked属性设置为true实现全选功能即可。

案例一：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>全选</title><script>function myAll() {var all = document.getElementById("all");var oneList = document.getElementsByName("one");for(var i = 0; i < oneList.length; i++) {oneList[i].checked = all.checked;}}function myOne() {var all = document.getElementById("all");var oneList = document.getElementsByName("one");for(var i = 0; i < oneList.length; i++) {if(oneList[i].checked == false) {all.checked = false;return;}}all.checked = true;}</script></head><body><table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px"><tr><th>全选<input id="all" type="checkbox" onclick="myAll()" /></th><th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>总计</th></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>1</td><td>物品A</td><td>￥55</td><td>1</td><td>￥55</td></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>2</td><td>物品B</td><td>￥70</td><td>1</td><td>￥70</td></tr><tr><td><input name="one" type="checkbox" onclick="myOne()" /></td><td>3</td><td>物品C</td><td>￥66</td><td>1</td><td>￥66</td></tr></table></body></html>

案例二：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><input type="checkbox" id="selectAll">全选/全不选<ul class="shop"><li><input type="checkbox">苹果</li><li><input type="checkbox">梨</li><li><input type="checkbox">葡萄</li><li><input type="checkbox">香蕉</li></ul><script type="text/javascript">document.getElementById("selectAll").onclick = function() {//this:指的是当前触发单机事件的元素console.log(this.checked)//获取当前全选的选中状态var isChecked = this.checked//获取到所有的水果的复选框var cbs = document.querySelectorAll(".shop input")//通过循环来全选的状态赋值给水果的复选框for (var i = 0; i < cbs.length; i++) {cbs[i].checked = isChecked}}//给所有的水果的复选框绑定单机事件for (var i = 0; i < cbs.length; i++) {cbs[i].onclick=function(){var count=0for(var j=0;j<cbs.length;j++){//判断复选框的选中状态if(cbs[j].checked){count++}}//判断选中的复选框的个数与实际的复选框的个数是否相等if(count==cbs.length){//将全选的复选框的状态改为选中document.getElementById("selectAll").checked=true}else{//将全选的复选框的状态改为选中document.getElementById("selectAll").checked=false}}}</script></body>
</html>

二、检查复选框：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript Checkbox</title>
</head>
<body><label for="submit"><input type="checkbox" id="submit" name="submit" value="yes"> Submit</label><script>const js = document.querySelector('#submit');console.log(js.checked); </script></body>
</html>

在这个例子中，

首先，你可以创建一个 Html 复选框元素。

<label for="submit"><input type="checkbox" id="submit" name="submit" value="yes"> Submit
</label>

其次，检查带有 id #submit 的复选框的选中属性。

const js = document.querySelector('#submit');
console.log(js.checked);

由于未选中该复选框，因此控制台中显示的结果将为 false。

false

如果选中该复选框，它将在控制台中显示 true。

例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript Checkbox</title>
</head>
<body><label for="submit"><input type="checkbox" id="submit" name="submit" value="yes" checked> Submit</label><script>const js = document.querySelector('#submit');console.log(js.checked); </script></body>
</html>

你将在控制台中看到输出为 true。

true

获取复选框值

复选框 和按钮 可以在下一页找到。单击按钮时，复选框的值将显示在控制台窗口上：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript Checkbox</title>
</head><body><label for="payment"><input type="checkbox" id="payment" name="payment"> Payment</label><button id="bt">Submit</button><script>const js = document.querySelector('#payment');const bt = document.querySelector('#bt');bt.onclick = () => {alert(js.value);};</script>
</body>
</html>

JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。相关推荐

jQuery分别获取选中的复选框值
jQuery分别获取选中的复选框值原文:jQuery分别获取选中的复选框值 function jqchk(){ //jquery获取复选框值 var s=''; $('input[na ...
jsp数组自动转换html,jsp页面将选中的复选框转数组传到后台
ajax选中的复选框转数组传到后台 var selectedItems = new Array(); $(':input[class=ids][checked]').each(function() { ...
JS jQuery分别获取选中的复选框值
转载地址 http://hi.baidu.com/lipan4/blog/item/8531c62330ee73b04623e886.html <!DOCTYPE html PUBLIC &qu ...
jquery获取所有选中的复选框
jquery获取所有选中的复选框提示:在列表中总有一些需求会在表头用到复选框进行批量操作,在此我介绍一下怎么获取到已选中的复选框值示例:如下所示,获取到数组之后1,通过ajax传给后台进行处理就好 ...
element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
java多选代码_[一天一点java web]复选框全选代码
My JSP 'checkbox.jsp' starting page //通过java script来实现 checkbox 全选复选框 function selectAll(){ //定义个变量 ...
react动态改变选中不选中_当使用react hooks选中任何复选框时,如何使启用按钮起作用?...
当选中任何复选框时,我在启用按钮时有一个错误.目前它在第一次点击时不起作用,而只在第二次点击时起作用.取消选中复选框也适用于第一次单击.我认为这与各州有关,但我不太明白是什么导致了这个问题. chec ...
获取选中状态复选框的值并添加id
多个复选框,现在点击选中首先是js: $("input:radio").click(function() {var sid=$('#template input:radio:ch ...
html控制复选框选中,选中HTML复选框
这是我的问题:我有一个带复选框的html模板.当php脚本运行时,它会将一个值传递给复选框的"checked"属性,如下所示: 其中{SHOW_PRODUCTS}可以是'check ...

JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。

一、Javacript设置全选的方法：首先创建一个HTML示例文件；然后添加script标签并创建js代码；最后通过循环遍历每个checkbox对象，将其checked属性设置为true实现全选功能即可。

二、检查复选框：

获取复选框值

JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。相关推荐

最新文章

热门文章

JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。

一、Javacript设置全选的方法：首先创建一个HTML示例文件；然后添加script标签并创建js代码；最后通过循环遍历每个checkbox对象，将其checked属性设置为true实现全选功能即可。

二、 检查复选框：

获取复选框值

JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。相关推荐

最新文章

热门文章

二、检查复选框：