check whether a checkbox in bootstrap-multiselect has been checked

Question

I want to check in javascript whether a checkbox in bootstrap-multiselect has been checked. Usually checkboxes are created using the label and the type="checkbox" attribute. In that case I can use

document.getElementById(id).checked

to test whether the checkbox is checked or not. But in bootstrap-multiselect, the label is used. Here is my html code:

<select class="demo" multiple="multiple">
    <option id="test_id" value="test_value">test_value</option>
</select>

If I use the function document.getElementById(id).checked, I get an "undefined" instead of true or false? What is the correct way to test for a checked or unchecked box in this case? thanks carl

Answer 1

Just push all the selected values into an array and manipulate the info as needed.

HTML

<select class="demo" multiple="multiple" >
  <option id="test_id1" value="test_value1">test_value1</option>
  <option id="test_id2" value="test_value2">test_value2</option>
  <option id="test_id3" value="test_value3">test_value3</option>
  <option id="test_id4" value="test_value4">test_value4</option>
</select>
<div id='selectedVals'></div>

jQuery

$(".demo").change(function() {
  var allSelected = new Array();
  $(".demo option:selected").each(function(){
    allSelected.push(this.value);
  });
  $('#selectedVals').html(allSelected)
});

https://jsfiddle.net/wa4mjmaj/

Answer 2

Here's a function that returns whether a specific option is checked using its id:

function isChecked(optionId) {
    return $(".demo > #" + optionId).get(0).selected;
}

Answer 3

Here's a fiddle using JQuery. I assume you're using JQuery if you're using Bootstrap. Those are select options you have, not checkboxes, btw ;)

https://jsfiddle.net/d1L8uott/

Code:

<select class="demo" multiple="multiple" id="mySelect">
 <option id="test_id1" value="test_value">test_value1</option>
 <option id="test_id2" value="test_value">test_value2</option>
 <option id="test_id3" value="test_value">test_value3</option>
</select>

$('#mySelect').change(function(){
  alert($('#mySelect option:selected').text());
});