Home > Developer > JavaScript
Javascript implements full checkbox selection by binding to aveon
All checkbox selection should be a more practical front-end technique. In many cases, we need to click a checkbox and select all the check boxes automatically. In some CMS systems, after using this JS effect, the operation experience will be greatly enhanced. How does one implement this function?
Duplex binding is one of the most interesting ones in aveon binding, because it helps developers to do a lot of work internally, reducing the code written by developers and improving Code elegance. The following shows how to select all common checkboxes.
Requirement: (Let's Talk About It)
1. After the Select All box is selected, all the following subselection boxes are selected. If the Select All box is not selected, all subselection boxes are not selected.
2. If one of the subselection boxes is not checked, deselect the All selection box;
3. select all in the subselection box, and then select all.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<! DOCTYPE html> <Html> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"> <Meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <Title> </title> <Style type = "text/css"> *{ Margin: 0; Padding: 0; } # Wrap { Margin-left: 100px; } # Wrap li { Display: inline-block; * Display: inline; Zoom: 1; Vertical-align: middle; } </Style> <Script type = "text/javascript" src = 'seed. js'> </script> </Head> <Body> <Div id = 'wrapp' ms-controller = 'duplex '> <P> <input type = 'checkbox' data-duplex-changed = "select_all_cb" ms-duplex-checked = 'select _ all'> select all </p> <Ul> <Li ms-repeat = 'LIST'> <Input type = 'checkbox' ms-duplex-number = "selected" ms-attr-value = 'El. id' >{{ el. text }} </Li> </Ul> <P> id of the selected item: {selected }}</p> </Div> <Script type = "text/javascript"> Require ('avon', function (aveon ){ Var duplex = aveon. define ('duplex ', function (vm ){ Vm. selected = []; // Save the id of the selected option for easy transmission to the background Vm. list = [{id: 1, text: 'aaa'}, {id: 2, text: 'bbb '}, {id: 3, text: 'ccc '}, {id: 4, text: 'ddd '}, {id: 5, text: 'Eee'}, {id: 6, text: 'fff'}]; Vm. select_all_cb = function () {// change Event Callback Var list = duplex. list, selected = duplex. selected; If (this. checked ){ Aveon. each (list, function (I, v) {// cyclically Save the data that has been checked Selected. ensure (v ['id']); // if there is no data in the selected box, save }); } Else Selected. clear (); // clear }; Vm. select_all = 0; }); Duplex. selected. $ watch ('length', function (after) {// listen for changes in the data array Var len = duplex. list. length; If (after = len) // all the subcheck boxes are selected. Duplex. select_all = 1; Else // One Of The subselection boxes is not checked Duplex. select_all = 0; }); Aveon. scan (); }); </Script> </Body> </Html> |
Effect
Notes:
1. data-duplex-changed monitors changes in the checkbox and triggers a callback.
2. ms-duplex-number = "selected" is an artifact. The selected array is synchronized with the sub-option box and affects each other. That is to say, when the number of elements in the selected array increases or decreases, the view of the corresponding sub-option box is updated, and vice versa.
3. ms-duplex-* must be of the same type as the checkbox value attribute value. Otherwise, the view cannot be synchronized. For example, if the checkbox value is a number, ms-duplex-number is used.
4. the type of the checkbox value attribute value cannot be taken for granted. Ben has encountered this problem. It is clear that the id number is passed from the background, but the view cannot be synchronized. The problem is solved by changing it to ms-duplex-string. So '7' or '7' should be clear.
From this small example, we can see how much mvvc like aveon can improve the coding experience. if you don't need it, think about how many for loops to write + if to judge!
The above is all the content of this article. I hope you will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
