JavaScript uses Avalon binding to implement CheckBox selection

CheckBox selection should be a more practical front-end skills, many times we need to click a checkbox, and then all the check boxes are automatically selected, some of the CMS system in the background, the use of this JS effect, will greatly enhance the operation experience, So how exactly is this function achieved?

Duplex Duplex binding is one of the most interesting Avalon bindings because it helps developers do a lot of things internally, allowing developers to write less code and more elegant code. Below is a casual demonstration of a common checkbox full selection.

Request: (Old fashioned, or say)

1. After the selection of the full box, the following sub-selection box is all checked; the checkbox is not checked, the child selection box is not selected

2. Sub-marquee If one is not checked, uncheck the full selection box;

3. Sub-selection box all check, then check all select box

?

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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60-61

<! DOCTYPE html>

Effect

Several points need to be explained:

1.data-duplex-changed is responsible for monitoring the change of the checkbox, triggering a callback.

2.ms-duplex-number= "Selected" This is the artifact, the selected array is synchronized with the child option box, affecting each other. That is, the number of elements in the selected array increases or decreases, and the view of the corresponding child option box is updated, and vice versa.

3.ms-duplex-* needs to be the same type as the CheckBox Value property, otherwise the view cannot be synchronized. Like here, the checkbox value value is a number, then Ms-duplex-number.

The type of the 4.checkbox Value property value is sometimes not to be judged. The cock has encountered, clearly passed from the background is the ID number, but can not sync view, and finally changed to ms-duplex-string to solve the problem. So ' 7 ' or 7, be sure.

From this small example you can see how to use the Avalon such MVVC is how to improve the coding experience, if not, want to write how many for loop +if judgment!

The above mentioned is the entire content of this article, I hope you can enjoy.