how to put alert on selecting bootstrap multiselect ckeckbox?

Question

I am using bootstrap multiselect. I want to generate a alert when a particular check box is checked.

my html looks like below

<label>Particulars :</label>
    <select id="example-getting-started" multiple="multiple">
        <option value="DS Form">DS Form</option>
        <option class="proof" value="Proofs">Proofs</option>
        <option value="Banners">Banners</option>
        <option value="IRCTC Form">IRCTC Form</option>
        <option value="R3 Form Returned">R3 Form Returned</option>
        <option value="Declaration Form">Declaration Form</option>
        <option value="Agent Declaration Form">Sub Agent Declaration Form</option>
        <option value="Old Tokens">Old Tokens</option>
        <option value="11">Registration Form </option>
        <option value="12">12</option> 
</select>

I want to generate a alert when proofs checkbox is checked.

I tried below code

 if( $('.multiselect-container>li>a>label>input[type=checkbox][value="proofs"]').prop("checked") == true)){
        alert("proofs checked");
    }

but its not working can any one help me.

Answer 1

You can use onChange event of bootstrap multiselect to get the selected option. As mentioned in your question, the below code only checks for Proofs and alerts user.

$('#example-getting-started').multiselect({
    onChange: function (element, checked) {
	if (checked === true) {
	   if ($(element).val() == "Proofs")  alert("proofs checked");
	}
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>

<label>Particulars :</label>
<select id="example-getting-started" multiple="multiple">
	<option value="DS Form">DS Form</option>
	<option class="proof" value="Proofs">Proofs</option>
	<option value="Banners">Banners</option>
	<option value="IRCTC Form">IRCTC Form</option>
	<option value="R3 Form Returned">R3 Form Returned</option>
	<option value="Declaration Form">Declaration Form</option>
	<option value="Agent Declaration Form">Sub Agent Declaration Form</option>
	<option value="Old Tokens">Old Tokens</option>
	<option value="11">Registration Form </option>
	<option value="12">12</option>
</select>