清除jquery中的select选项的复选框

Question

In below fiddle, I have a bootstrap modal and there is a Select Users MultipleSelect.

I need to clear the selection on modal close, like set the dropdown to defaults without any selection.

For example, if I select user 1 and user 2, then on modal close, none should be selected. The previous selection must be gone.

The code I am trying isn't helping me out and neither are any posts here on stack overflow.

A little that I tried is this :

$("#usersDropDown option:selected").attr("checked",false);

And this :

$("#usersDropDown option:selected").attr("selected",false);

And also this:

$("#usersDropDown option:selected").removeAttr("checked");

Please guide me what should I do ?

Fiddle

Answer 1

Hi can you check now fiddle . Its working I guess. I add this code to modal shown. If you want you can add it to hidden function

$("#usersDropDown").siblings(".ms-parent")
 .find("li.selected input[type='checkbox']").click();

Answer 2

You can use $('#usersDropDown').multipleSelect("uncheckAll"); inorder to deselect all.

JSFiddle

 var currentDate = new Date(); var day = currentDate.getDate(); if (day < 10) day = "0" + day; var month = currentDate.getMonth() + 1; if (month < 10) { month = "0" + month; } var hours; var year = currentDate.getFullYear(); todayDateReport = year + "-" + month + "-" + day; $("#currentDate").html(todayDateReport); startDate = todayDateReport + " 00:00:00"; endDate = todayDateReport + " 23:59:59"; hours = " 00:00"; $('.input-group').datetimepicker({ format: 'YYYY-MM-DD HH:mm', collapse: true, sideBySide: false, useCurrent: false, showClose: true, }); $('#hoursInput').datetimepicker({ format: 'HH:mm', collapse:true, sideBySide:false, useCurrent:false, showClose:true, focusOnShow: false, }); $('#hoursInputExpiry').datetimepicker({ format: 'HH:mm', collapse:true, sideBySide:false, useCurrent:false, showClose:true, focusOnShow: false, }); $("#startDateInputExpiry").val(startDate); $("#endDateInputExpiry").val(endDate); $("#hoursInput").val(hours); $("#hoursInputExpiry").val(hours); $("#sendDropDownOptions").on('change', function() { if ($("#sendDropDownOptions option:selected").text() == "Datetime") { $("#durationHoursSend").addClass('hide'); $("#sendTD").append($("#startdatetimeSend")) $("#startdatetimeSend").removeClass('hide'); } else if ($("#sendDropDownOptions option:selected").text() == "Hours") { $("#startdatetimeSend").addClass('hide'); $("#sendTD").append($("#durationHoursSend")) $("#durationHoursSend").removeClass('hide'); } else { $("#startdatetimeSend").addClass('hide'); $("#durationHoursSend").addClass('hide'); } }); $('#shareLocationModal').on('shown.bs.modal', function() { $('#usersDropDown').multipleSelect("uncheckAll"); if ($("#expiryDropDownOptions option:selected").text() == "DatetimeExp") { $("#startdatetimeExpiry").removeClass('hide'); $("#expiryTD").append($("#startdatetimeExpiry")) } }); $("#expiryDropDownOptions").on('change', function() { if ($("#expiryDropDownOptions option:selected").text() == "HoursExp") { $("#startdatetimeExpiry").addClass('hide'); $("#durationHoursExpiry").removeClass('hide'); $("#expiryTD").append($("#durationHoursExpiry")) }else if ($("#expiryDropDownOptions option:selected").text() == "DatetimeExp") { $("#durationHoursExpiry").addClass('hide'); $("#startdatetimeExpiry").removeClass('hide'); $("#expiryTD").append($("#startdatetimeExpiry")) } else { $("#durationHoursExpiry").addClass('hide'); $("#startdatetimeExpiry").addClass('hide'); } }); $("#usersDropDown").multipleSelect({ placeholder: "Select Users", selectAll: true, width: "100%", filter: true, }); $("#send").on("click", function() { $("#sendDropDownOptions").val('Now').trigger('change'); }); 

 .modal-body { max-height: calc(100vh - 210px); overflow-y: auto; } 

 <link href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css" rel="stylesheet"/> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script><script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/css/jasny-bootstrap.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.1/js/jasny-bootstrap.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/multiple-select/1.2.0/multiple-select.js"></script> <link rel="stylesheet" type="text/css" href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css"> <button class="btn btn-primary btn-responsive md-btn" id="btnn" data-toggle="modal" data-target="#shareLocationModal"> Share </button> <div id="shareLocationModal" class="modal fade"> <div class="modal-dialog wideModal"> <div class="modal-content"> <div class="modal-header modal-header-custom"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times" aria-hidden="true"></i></button> <h4 class="modal-title" id="modaltitle">Share Location Preferences</h4> </div> <div class="modal-body"> <div class="container"> <div class="row form-group"> <div class="col-xs-12"> <div class="form-group col-md-12 col-sm-6"> <form id="shalreLocationDetails" class="form"> <div> <div class="form-group"> <label>Phone No:</label> <input type="tel" class="form-control" id="phoneNo" data-toggle="tooltip" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Phone No" onkeypress="return checkValidation(event)" data-placement="bottom" placeholder="Mobile Number" maxlength="10" data-validation="number"> <!-- <input type="text" class="form-control" id="phone"placeholder="Phone No" data-validation="number" data-validation-allowing="+" /> --> </div> <div class="form-group"> <label>e-mail:</label> <input type="email" class="form-control" id="email" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="e-mail" placeholder="e-mail" data-validation="email"> </div> <div class="form-group"> <label>Select Users:</label> <select id="usersDropDown" multiple="multiple" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Select Users"> <option>User 1</option> <option>User 2</option> <option>User 3</option> <option>User 4</option> </select> </div> <div class="form-group"> <label>Send:</label> <select id="sendDropDownOptions" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Send Options" class="form-control" style="width:100%;"> <option value="Now">Now</option> <option value="Datetime">Datetime</option> <option value="Now">Hours</option> </select> </div> <div id="sendTD"></div> <br> <div class="form-group"> <label>Expiry:</label> <select id="expiryDropDownOptions" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Expiry Options" class="form-control" style="width:100%;"> <option>DatetimeExp</option> <option>HoursExp</option> </select> </div> <div id="expiryTD"></div> <br> </div> </form> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary btn-responsive md-btn" id="send">Send</button> <button type="button" class="btn btn-default btn-responsive md-btn" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> <div id="startdatetimeSend" class="hide"> <div class='input-group date' id='startDate'> <input type='text' class="form-control" placeholder="Start Date" id="startDateInputExpiry" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div id="durationHoursSend" class="hide"> <div class='date' id='startDate'> <input type='text' class="form-control" placeholder="Start Date" id="hoursInput" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div id="startdatetimeExpiry" class="hide"> <div class="input-group date" id='endDate'> <input type='text' class="form-control" placeholder="End Date" id="endDateInputExpiry" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div id="durationHoursExpiry" class="hide"> <div class='date' id='startDate'> <input type='text' class="form-control" placeholder="Start Date" id="hoursInputExpiry" style="position: relative;" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> 

Answer 3

You can use the following code to reset the form data and the multi select box in the drop-down on bootstrap modal window to clear contents.

$('#shareLocationModal').on('hidden.bs.modal', function(){
    $('#usersDropDown').multipleSelect('refresh'); // to reset the multi select users dropdown
    $(this).find('form')[0].reset(); // To reset form fields
})

Answer 4

Have you tried $("#usersDropDown").prop('selectedIndex',-1); ?

Answer 5

为我工作：

$("input:checkbox").removeAttr("checked");