CODEWITHSUNDEEP
javascriptjqueryhtml
Jonathan
Jonathan

Reputation: 21

How to select/unselect select options with checkboxes with JavaScript / jQuery?

I have almost no knowledge of JavaScript or jQuery.

I need to select/unselect an option in a <select> where multiple options can be selected when a checkbox or button is clicked.

The checkbox needs to select/unselect the option with the same value. My idea was something like this:

$(document).ready(function() {
  var input = $('#entry-select');
  var checkboxes = $('.entrycheckbox');

  checkboxes.click(function() {
    var element = $(this);
    var value = element.val();
    input.val(value);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
  <select name="entries" id="entry-select" multiple>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
  </select>
</form>

This only selects the option with the value of the last clicked checkbox, not which ones are checked, and it unselects every other option.

Upvotes: 1

Views: 129

Answers (2)

Umair Latif
Umair Latif

Reputation: 528

 <script type="text/javascript">
        $(document).ready(function(){
            $('.entrycheckbox').click(function(){

                $(":entrycheckbox").each(function(){
                    if($(this).val()==1){     
                    $(this).attr("checked","checked");
                    }
                });
            });
        });

    </script>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

You only give val() the value of the checkbox which was selected last. To make this work as you require you need to build an array of all selected checkboxes and provide that to val() instead.

To achieve this you can use filter() to get the selected checkboxes, then map() to build the array:

input.val(checkboxes.filter(':checked').map((i, el) => el.value));


$(document).ready(function() {
  var $input = $('#entry-select');
  var $checkboxes = $('.entrycheckbox');

  $checkboxes.click(function() {
    $input.val($checkboxes.filter(':checked').map((i, el) => el.value));
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="entrycheckbox" value="1">
<input type="checkbox" class="entrycheckbox" value="2">
<input type="checkbox" class="entrycheckbox" value="3">
<form action="">
  <select name="entries" id="entry-select" multiple>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
    <option value="3">Option3</option>
  </select>
</form>

You may also want to consider adding readonly to the select if you don't want the user to change the selected option directly.

Upvotes: 1

Related Questions