多選框事件（多選和單選）

阿新 • • 發佈：2021-12-24

jquery實現引入jquery檔案

 // 線上引入
 <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>

html程式碼

<div style='width:300px;height:50px;margin-left:300px;margin-right:auto;'>
		<label>多選框: </label>	
		<input type="checkbox" name="checkAll" value="" title="全選">全選
		<input type="checkbox" name="type" value="奧迪" title="奧迪">奧迪
		<input type="checkbox" name="type" value="豐田" title="豐田">豐田
		<input type="checkbox" name="type" value="大眾" title="大眾">大眾	  
</div>

jquery程式碼

$(function(){
		 // 獲取單個單選框的值
		$(":checkbox[name='type']").on('change', function () {	
			var item= $(this).val();
			alert(item)
			arr = $('input[name="type"]').length
			checkedArr = $('input[name="type"]:checked').length
			if(arr == checkedArr){
				$('input[name="checkAll"]').prop('checked', 'checked')
			} else {
				$('input[name="checkAll"]').prop('checked', '')
			}
		})

		// 獲取同一name全部多選框的狀體
		$(":checkbox[name='checkAll']").on('click', function () {
			var flag = $(this).prop('checked')
			//alert(flag)
		    var item=$('input:checkbox[name="type"]');
			item.each(function(index, element){
				//alert($(element).val())
				if(flag) {
					$(element).prop("checked", "checked")
					alert('全選')
				} else {
					$(element).prop("checked", "")
					alert('全不選')
				}
			})
		})
	})

效果如下

2、layui實現
引入檔案

 <link href="layui-v2.5.5/layui/css/layui.css" rel="stylesheet" />
 <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
 <script src="layui-v2.5.5/layui/layui.js" type="text/javascript"></script>

html檔案

<div class="layui-form">   
    <div style='width:300px;height:50px;margin-left:300px;margin-right:auto;'>
	    <label>多選框: </label>	
		<input type="checkbox" name="checkAll" lay-filter="demoCheckboxAll" value="" title="全選">全選
		<input type="checkbox" name="type" lay-filter="demoCheckbox" value="奧迪" title="奧迪">奧迪
		<input type="checkbox" name="type" lay-filter="demoCheckbox" value="豐田" title="豐田">豐田
		<input type="checkbox" name="type" lay-filter="demoCheckbox" value="大眾" title="大眾">大眾	  
    </div>
  </div>

js檔案

layui.use(['element','form', 'table','layer'], function () {
	  let form = layui.form, layerDom = layui.layer, element = layui.element;
	  // 獲取單個選中的值
	  form.on('checkbox(demoCheckbox)', function (data) {
				// alert(data.elem.checked);
				alert(data.value);//判斷單選框的選中值
				arr = $('input[name="type"]').length
				checkedArr = $('input[name="type"]:checked').length
				// 若全選中則全選按鈕自動選中
				if(arr == checkedArr){
					$('input[name="checkAll"]').prop('checked', 'checked')
				} else {
					$('input[name="checkAll"]').prop('checked', '')
				}
				form.render()
				
	  });

	   // 全選按鈕切換
	  form.on('checkbox(demoCheckboxAll)', function (data) {
				var flag = data.elem.checked;
				alert(flag)
				arr = $('input[name="type"]')
				arr.each(function(index, item){
					if(flag){
						$(item).prop('checked', 'checked')
					} else {
						$(item).prop('checked','')
					}
					
				})
				form.render()
				
	  });
	  form.render()

	})

注意實現切換後要呼叫form.render()方法，否則不顯示全選或不全選狀態。

3、用vue實現
引入js檔案如下

 <script src="vue.js" type="text/javascript"></script>

html程式碼如下

<div id="app">   
    <div style='width:300px;height:50px;margin-left:300px;margin-right:auto;'>
	    <label>多選框: </label>	
		<input type="checkbox" name="checkAll" @click='checkAll'  value="" title="全選">全選
		<input type="checkbox" name="type"  @click='checkOne'  value="奧迪" title="奧迪">奧迪
		<input type="checkbox" name="type"  @click='checkOne' value="豐田" title="豐田">豐田
		<input type="checkbox" name="type"  @click='checkOne' value="大眾" title="大眾">大眾	  
    </div>
  </div>

js程式碼如下

var app = new Vue({
		el:'#app',
		data:{
			type:'',
		},
		created:function(){
			var _this = this;
		},
		methods:{
			checkOne:function(event){
				let _this = this
				_this.type = event.target.value
                alert(_this.type)
				arr = $('input[name="type"]').length
				checkedArr = $('input[name="type"]:checked').length
				if(arr == checkedArr){
					$('input[name="checkAll"]').prop('checked', 'checked')
				} else {
					$('input[name="checkAll"]').prop('checked', '')
				}
            },
			checkAll:function(event){
				let _this = this
				let flag = event.target.checked
				let arr = $('input[name="type"]')

				arr.each(function(index, item){
					if(flag){
						$(item).prop('checked', 'checked')
					}else {
						$(item).prop('checked', '')
					}
				})
				
            }
		},
        
	});