Those js that are often used but are not easy to write in the background -- multiple box event

jquery implementation Import jquery file

 // Online introduction
 <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>

html code

<div style='width:300px;height:50px;margin-left:300px;margin-right:auto;'>
		<label>Checkbox: </label>	
		<input type="checkbox" name="checkAll" value="" title="All election">All election
		<input type="checkbox" name="type" value="Audi" title="Audi">Audi
		<input type="checkbox" name="type" value="Toyota" title="Toyota">Toyota
		<input type="checkbox" name="type" value="Public" title="Public">Public	  
</div>

jquery code

$(function(){
		 // Get the value of a single radio box
		$(":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', '')
			}
		})

		// Get the shape of all multiple boxes of the same 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('All election')
				} else {
					$(element).prop("checked", "")
					alert('Totally unselected')
				}
			})
		})
	})

The effect is as follows

2. Implementation of layui
Import files

 <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 file

<div class="layui-form">   
    <div style='width:300px;height:50px;margin-left:300px;margin-right:auto;'>
	    <label>Checkbox: </label>	
		<input type="checkbox" name="checkAll" lay-filter="demoCheckboxAll" value="" title="All election">All election
		<input type="checkbox" name="type" lay-filter="demoCheckbox" value="Audi" title="Audi">Audi
		<input type="checkbox" name="type" lay-filter="demoCheckbox" value="Toyota" title="Toyota">Toyota
		<input type="checkbox" name="type" lay-filter="demoCheckbox" value="Public" title="Public">Public	  
    </div>
  </div>

js file

layui.use(['element','form', 'table','layer'], function () {
	  let form = layui.form, layerDom = layui.layer, element = layui.element;
	  // Get single selected value
	  form.on('checkbox(demoCheckbox)', function (data) {
				// alert(data.elem.checked);
				alert(data.value);//Determine the selected value of the radio box
				arr = $('input[name="type"]').length
				checkedArr = $('input[name="type"]:checked').length
				// If all is selected, the select all button will be selected automatically
				if(arr == checkedArr){
					$('input[name="checkAll"]').prop('checked', 'checked')
				} else {
					$('input[name="checkAll"]').prop('checked', '')
				}
				form.render()
				
	  });

	   // Select all button switch
	  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()

	})

Note that the form.render() method should be called after the implementation of the switch, otherwise the state of all or not all selections will not be displayed.

3. Implementation with vue
Import js file as follows

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

The html code is as follows

<div id="app">   
    <div style='width:300px;height:50px;margin-left:300px;margin-right:auto;'>
	    <label>Checkbox: </label>	
		<input type="checkbox" name="checkAll" @click='checkAll'  value="" title="All election">All election
		<input type="checkbox" name="type"  @click='checkOne'  value="Audi" title="Audi">Audi
		<input type="checkbox" name="type"  @click='checkOne' value="Toyota" title="Toyota">Toyota
		<input type="checkbox" name="type"  @click='checkOne' value="Public" title="Public">Public	  
    </div>
  </div>

js code is as follows

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

Design sketch

Question: why can we only use jquery's selectors to select object arrays in the layer UI or vue, and can we use the layer filter or v-model tags of the framework?

Tags: Front-end JQuery Javascript Vue

Posted on Wed, 06 Nov 2019 17:23:34 -0500 by GBahle