JavaScript uses Avalon binding to implement CheckBox selection

Source: Internet
Author: User

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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.