How to get selected multi checkbox values in a string

Question

How to get the checked multi checkbox values in a string with comma-separated and not in an array? I have a muli-checkbox as below

<div class="col-md-7 form-inline mediaTypesContain">
                    <div class="checkbox">
                        <input type="checkbox" id="mediaTypes" value="Video">
                        <label for="mediaTypes">
                            Video
                        </label>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" id="mediaTypes-1" value="Audio">
                        <label for="mediaTypes-1">
                            Audio
                        </label>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" id="mediaTypes-2" value="Images">
                        <label for="mediaTypes-2">
                            Images
                        </label>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" id="mediaTypes-3" value="PDF Files">
                        <label for="mediaTypes-3">
                            PDF Files
                        </label>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" id="mediaTypes-4" value="I don't know">
                        <label for="mediaTypes-4">
                            I don't know
                        </label>
                    </div>

I am trying to get only the checked values using the following JS.

        var mediaTypes = $('.checkbox')[0].innerText + ',' + $('.checkbox')[1].innerText + ','+ $('.checkbox')[2].innerText + ','+ $('.checkbox')[3].innerText + ','+ $('.checkbox')[4].innerText

However, the JS returns all the text even if the field is not selected. How to get the checked multi checkbox values in a string with comma-separated and not in an array?

Answer 1

Not the shortest or most concise script... but to better explain why you aren't where you want to be...

var mediaTypes = $('.checkbox')[0].innerText

Here, your jquery selector is not getting the input boxes. its getting the parent divs of the input boxes... and when you grab the innerText... it's looking for the resultant text that is displayed. There is no consideration of the checked value of the actual input elements themselves.

$('.checkbox :checkbox');

This selector will return the array of all elements with type=checkbox and who have parent element with class=checkbox.

Elements with type=checkbox have an attribute named checked that is true or false. You can check its value to determine whether or not to add it to your string.

The following snippet uses a basic for loop to grab all of your checkbox elements, determine the ones checked, and put them into the string which is then spit out to the console. Other answers have used more advanced jquery selectors and array/anonymous functions to do basically the same.

 function onTestClick() { var checkedString = ''; for (var i = 0; i < 5; i++) { var element = $('.checkbox :checkbox')[i]; if (element.checked) { if (checkedString.length > 0) { checkedString += ','; } checkedString += element.value; } } console.log('checkedString = ' + checkedString); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-7 form-inline mediaTypesContain"> <div class="checkbox"> <input type="checkbox" id="mediaTypes" value="Video"> <label for="mediaTypes">Video</label> </div> <div class="checkbox"> <input type="checkbox" id="mediaTypes-1" value="Audio"> <label for="mediaTypes-1">Audio</label> </div> <div class="checkbox"> <input type="checkbox" id="mediaTypes-2" value="Images"> <label for="mediaTypes-2">Images</label> </div> <div class="checkbox"> <input type="checkbox" id="mediaTypes-3" value="PDF Files"> <label for="mediaTypes-3">PDF Files</label> </div> <div class="checkbox"> <input type="checkbox" id="mediaTypes-4" value="I don't know"> <label for="mediaTypes-4">I don't know</label> </div> <button id="testButton" onClick="onTestClick()">Test</button> </div>

Answer 2

You can do something like:

Note: By default, I checked two checkbox to showcase the solution.

 const checked = $('.checkbox input[type="checkbox"]:checked') const strings = [] const newVal = checked.map(data => strings.push(checked[data].value)) console.log(strings.join(','))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-7 form-inline mediaTypesContain"> <div class="checkbox"> <input type="checkbox" checked id="mediaTypes" value="Video"> <label for="mediaTypes"> Video </label> </div> <div class="checkbox"> <input type="checkbox" id="mediaTypes-1" value="Audio"> <label for="mediaTypes-1"> Audio </label> </div> <div class="checkbox"> <input type="checkbox" id="mediaTypes-2" value="Images"> <label for="mediaTypes-2"> Images </label> </div> <div class="checkbox"> <input type="checkbox" id="mediaTypes-3" value="PDF Files"> <label for="mediaTypes-3"> PDF Files </label> </div> <div class="checkbox"> <input type="checkbox" checked id="mediaTypes-4" value="I don't know"> <label for="mediaTypes-4"> I don't know </label> </div>

Happy Coding !!!

Answer 3

Or, in a more jQuery-like way, you can do it like this:

 const checked = $('.checkbox input[type="checkbox"]:checked').map((_,c)=>c.value).toArray().join(","); console.log(checked)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-7 form-inline mediaTypesContain"> <div class="checkbox"> <input type="checkbox" checked id="mediaTypes" value="Video"> <label for="mediaTypes"> Video </label> </div> <div class="checkbox"> <input type="checkbox" id="mediaTypes-1" value="Audio"> <label for="mediaTypes-1"> Audio </label> </div> <div class="checkbox"> <input type="checkbox" id="mediaTypes-2" value="Images"> <label for="mediaTypes-2"> Images </label> </div> <div class="checkbox"> <input type="checkbox" id="mediaTypes-3" value="PDF Files"> <label for="mediaTypes-3"> PDF Files </label> </div> <div class="checkbox"> <input type="checkbox" checked id="mediaTypes-4" value="I don't know"> <label for="mediaTypes-4"> I don't know </label> </div>

.toArray() converts the jQuery object into a JavaScript array. The same can be achieved with .get() .

Answer 4

Here is a solution in Pure JS :

 var mediaTypes = ''; function Result(){ mediaTypes = []; var elmnts = document.getElementsByClassName('checkbox'); for (let i = 0; i < elmnts.length; i++) { if(elmnts[i].checked) { mediaTypes.push(elmnts[i].value); }} mediaTypes = mediaTypes.join(); console.log(mediaTypes); document.write(mediaTypes); }

 <!DOCTYPE html> <html> <body> <div class="col-md-7 form-inline mediaTypesContain"> <div> <input class="checkbox" type="checkbox" id="mediaTypes" value="Video"> <label for="mediaTypes"> Video </label> </div> <div> <input class="checkbox" type="checkbox" id="mediaTypes-1" value="Audio"> <label for="mediaTypes-1"> Audio </label> </div> <div> <input class="checkbox" type="checkbox" id="mediaTypes-2" value="Images"> <label for="mediaTypes-2"> Images </label> </div> <div> <input class="checkbox" type="checkbox" id="mediaTypes-3" value="PDF Files"> <label for="mediaTypes-3"> PDF Files </label> </div> <div> <input class="checkbox" type="checkbox" id="mediaTypes-4" value="I don't know"> <label for="mediaTypes-4"> I don't know </label> </div> </div> <button onclick="Result()">Test</button> </body> </html>