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, Apr 12 '16 at 06:18
3 divs with same id .it's invalid .when you call get id ,1st one is taken — Madhawa Priyashantha, Apr 12 '16 at 06:21
there is lot of ways to do it.you can get clicked element .or you can pass parameter to `showCheckboxes(2)` . — Madhawa Priyashantha, Apr 12 '16 at 06:25
__ID must be unique__ You should avoid inline-event-binding. jQuery can be handy to deal with complex DOM manipulations.. — Rayon, Apr 12 '16 at 06:26

Madhawa Priyashantha · Answer 1 · 2016-04-12T07:11:33.200

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 '16 at 07:11

answered Apr 12 '16 at 06:45

Madhawa Priyashantha

9,633
7
33
60

how can get input values of multiple input case? – noushid p Apr 12 '16 at 06:48
@noushidp i don't get it ?can you clarify – Madhawa Priyashantha Apr 12 '16 at 06:49
i need to get the values of check boxes. – noushid p Apr 12 '16 at 06:51
@noushidp you can get it using index i .see https://jsfiddle.net/93894gbs/4/ this will alert the value of check box inside `checkboxes` div – Madhawa Priyashantha Apr 12 '16 at 07:07
how can get value of multiple input box in one check box ? – noushid p Apr 12 '16 at 07:10
@noushidp what ? in one checkbox ? – Madhawa Priyashantha Apr 12 '16 at 07:12
i need to get checked values how can do? – noushid p Apr 12 '16 at 07:50
@noushidp so in your code i don't see you get the checkbox values .http://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox read this question if you want to know how to get the value from checkbox .did you get the answer to question you posted? – Madhawa Priyashantha Apr 12 '16 at 07:53

Khyati · Answer 2 · 2016-04-12T07:09:12.097

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 '16 at 07:09

answered Apr 12 '16 at 07:02

Khyati

233
1
5

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 – Khyati Apr 12 '16 at 07:59

How to do multiple selection with javaScript

2 Answers2