那些常用但后台开发写起来却不顺手的js（3）——多选框事件

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', '')
					}
				})
				
            }
		},
        
	});

效果图

问题：为什么在layui或vue里也只能用jquery的选择器选择对象数组，可以用框架自带的lay-filter或v-model等标签实现么？

来源：oschina

链接：https://my.oschina.net/u/2301293/blog/3126502