How to do multiple selection with javaScript

Question

Iam trying to do multiple select with JavaScript. but can't working.how can i fix this? Iam done it in following way

 var expanded = false;
        function showCheckboxes() {
            var checkboxes = document.getElementById("checkboxes");
            if (!expanded) {
                checkboxes.style.display = "block";
                expanded = true;
            } else {
                checkboxes.style.display = "none";
                expanded = false;
            }
        }

.multiselect {
            width: 200px;
        }
        .selectBox {
            position: relative;
        }
        .selectBox select {
            width: 100%;
            font-weight: bold;
        }
        .overSelect {
            position: absolute;
            left: 0; right: 0; top: 0; bottom: 0;
        }
        #checkboxes {
            display: none;
            border: 1px #dadada solid;
        }
        #checkboxes label {
            display: block;
        }
        #checkboxes label:hover {
            background-color: #1e90ff;
        }

<div class="multiselect">
                <div class="selectBox" onclick="showCheckboxes()">
                    <select>
                        <option>check box1</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div id="checkboxes">
                    <label for="one"><input type="checkbox" id="one" />First checkbox</label>
                </div>
            </div>
<div class="multiselect">
                <div class="selectBox" onclick="showCheckboxes()">
                    <select>
                        <option>check box2</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div id="checkboxes">
                    <label for="one"><input type="checkbox" id="one" />First checkbox</label>
                </div>
            </div>
<div class="multiselect">
                <div class="selectBox" onclick="showCheckboxes()">
                    <select>
                        <option>check box3</option>
                    </select>
                    <div class="overSelect"></div>
                </div>
                <div id="checkboxes">
                    <label for="one"><input type="checkbox" id="one" />First checkbox</label>
                </div>
            </div>

Identifiers in HTML must be unique. It will make the HTML document invalid — Satpal
– Satpal, Commented Apr 12, 2016 at 6:18
3 divs with same id .it's invalid .when you call get id ,1st one is taken — Madhawa Priyashantha
– Madhawa Priyashantha, Commented Apr 12, 2016 at 6:21
there is lot of ways to do it.you can get clicked element .or you can pass parameter to showCheckboxes(2) . — Madhawa Priyashantha
– Madhawa Priyashantha, Commented Apr 12, 2016 at 6:25
ID must be unique You should avoid inline-event-binding. jQuery can be handy to deal with complex DOM manipulations.. — Rayon
– Rayon, Commented Apr 12, 2016 at 6:26

Madhawa Priyashantha · Accepted Answer · 2016-04-12 07:11:33Z

1

you cannot have same id for multiple elements .it's invalid . however when you call getElementById() 1st element is taken .that's why in your example only 1st element expand and collapse .

here is example . in this example i pass a parameter to showCheckboxes methods.so we can select correct checkboxes .also we have to store state of 3 elements individually.

https://jsfiddle.net/93894gbs/5/

js

var expanded = [false, false, false];
var checkboxes;

function showCheckboxes(i) {
  checkboxes = checkboxes || document.getElementsByClassName("checkboxes");
  if (!expanded[i]) {
    checkboxes[i].style.display = "block";
    expanded[i] = true;
  } else {
    checkboxes[i].style.display = "none";
    expanded[i] = false;
  }
}

edited Apr 12, 2016 at 7:11

answered Apr 12, 2016 at 6:45

Madhawa Priyashantha

9,8757 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

noushid p Over a year ago

how can get input values of multiple input case?

Madhawa Priyashantha Over a year ago

@noushidp i don't get it ?can you clarify

noushid p Over a year ago

i need to get the values of check boxes.

Madhawa Priyashantha Over a year ago

@noushidp you can get it using index i .see jsfiddle.net/93894gbs/4 this will alert the value of check box inside checkboxes div

noushid p Over a year ago

how can get value of multiple input box in one check box ?

|

Khyati · Accepted Answer · 2016-04-12 07:09:12Z

0

Also you can pass "event" attribute while calling the handler like :

div class="selectBox" onclick="showCheckboxes(event)"

and change javascript like :

var expanded = false;
function showCheckboxes(ev) {
    console.log("ev", ev);

    var checkboxes = ev.currentTarget.parentElement.lastElementChild;
    if (!expanded) {
        checkboxes.style.display = "block";
        expanded = true;
    } else {
        checkboxes.style.display = "none";
        expanded = false;
    }
}

edited Apr 12, 2016 at 7:09

answered Apr 12, 2016 at 7:02

Khyati

2311 silver badge5 bronze badges

1 Comment

Khyati Over a year ago

When you send the event object as paramenet in "showCheckboxes(event)" function, you can access the element on which the click happened using : ev.currentTarget and then taking its parent node's last child using: ev.currentTarget.parentElement.lastElementChild which will be the div with id="checkboxes", you can execute rest of the function

Collectives™ on Stack Overflow

How to do multiple selection with javaScript

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related