This is the 15th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.

Today, there are three ways to set up response events for multiple tags. Let’s see, hey, hey, hey.

1. HTML layout

To achieve the design of the relevant needs of the area, THE HTML layout is as follows:

1. Options TAB area

2. Select all, none and reverse regions by button

The core HTML code for the layout is as follows:

    <div class="select">
        <div class="content">
            <p><input type="checkbox" name="" id="">basketball</p>
            <p><input type="checkbox" name="" id="">football</p>
            <p><input type="checkbox" name="" id="">badminton</p>
            <p><input type="checkbox" name="" id="">Table tennis</p>
        </div>
        <div class="btn">
            <button onclick="checkStatus(0)">select all</button>
            <button onclick="checkStatus(1)">All don't choose</button>
            <button onclick="checkStatus(2)">The selected</button>
        </div>
    </div>
Copy the code

2. CSS styles

Because mainly for the practice of javascript code, HTML layout style information how convenient how to come, the style is as follows:

The layout after adding the style information is as follows:

Third, Javascript effects

1. Obtain related label objects: option label objects, all, none and anti-select button objects

2. Bind response events Method 1: Bind events for each button

button[0].addEventListener('click'.() = > {
    for (let i = 0; i < input.length; i++) {
        input[i].checked = true;
    }
})
button[1].addEventListener('click'.() = > {
    for (let i = 0; i < input.length; i++) {
        input[i].checked = false;
    }
})
button[2].addEventListener('click'.() = > {
    for (let i = 0; i < input.length; i++) {
        input[i].checked = !input[i].checked;
    }
})

Copy the code

3. Bind response event method 2: Encapsulate function

Method 3: Bind the response event to the tag

5. When selecting options, note the following three points: (1) The user selects the check box. The checked property of the JS input object is true

B station video website: www.bilibili.com/video/BV1b6…