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

// 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> <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?

6 November 2019, 17:23 | Views: 3108