全选、反选、取消全选按钮代码以及vue.js全选与取消全选

最新推荐文章于 2025-05-20 16:08:55 发布

原创最新推荐文章于 2025-05-20 16:08:55 发布 · 518 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

Vue.js 同时被 2 个专栏收录

6 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

本文详细介绍了如何使用HTML和JavaScript实现网页上的全选、取消全选及反选功能，并通过Vue.js框架展示了如何在现代前端应用中同步复选框状态，包括全选按钮的联动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div>
		<input type="checkbox" value="1" name="checkbox"/>吃饭
		    <input type="checkbox" value="2" name="checkbox"/>睡觉
		    <input type="checkbox" value="3" name="checkbox"/>玩游戏
			<input type="checkbox" value="4" name="checkbox"/>	看电视	
			<button type="button" onclick="opcheckboxed('checkbox','allChecked')">全选</button>
			<button type="button" onclick="opcheckboxed('checkbox','unChecked')">取消全选</button>
		    <button onclick="opcheckboxed('checkbox', 'reversecheck')">反选</button>
		</div>
	</body>
	
<script>
	function opcheckboxed(objName, type){
  var objNameList=document.getElementsByName(objName);
  if(null!=objNameList){
    for(var i=0;i<objNameList.length;i++){  
      if(objNameList[i].checked==true)
      {
        if(type != 'checkall') {  // 非全选
          objNameList[i].checked=false;
        }
        
      } else {
        if(type != 'uncheckall') {  // 非取消全选
          objNameList[i].checked=true;
        }
      }
    }  
  }
}
	
	
</script>


</html>

vue.js 全选与取消全选

<div id="app">
	<p>
		全选：
	</p>
	<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">
	<label for="checkbox">
		{{checked}}
	</label>
	<p>
		多个复选框：
	</p>
	<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
	<label for="runoob">
		Runoob
	</label>
	<input type="checkbox" id="google" value="Google" v-model="checkedNames">
	<label for="google">
		Google
	</label>
	<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
	<label for="taobao">
		taobao
	</label>
	<br>
	<span>
		选择的值为:{{checkedNames}}
	</span>
</div>
new Vue({
	el: '#app',
	data: {
		checked: false,
		checkedNames: [],
		checkedArr: ["Runoob", "Taobao", "Google"]
	},
	methods: {
		changeAllChecked: function() {
			if (this.checked) {
				this.checkedNames = this.checkedArr
			} else {
				this.checkedNames = []
			}
		}
	},
	watch: {
		"checkedNames": function() {
			if (this.checkedNames.length == this.checkedArr.length) {
				this.checked = true
			} else {
				this.checked = false
			}
		}
	}
})