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

Question

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.

use checked attribute.

George
– George

2019-11-29 11:16:56 +00:00
Commented Nov 29, 2019 at 11:16 — George
– George, Commented Nov 29, 2019 at 11:16

Rory McCrossan · Accepted Answer · 2019-11-29 11:17:01Z

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.

Umair Latif · Accepted Answer · 2019-11-29 11:21:59Z

0

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

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

    </script>

answered Nov 29, 2019 at 11:21

Umair Latif

5284 silver badges6 bronze badges

1 Comment

Umair Latif Over a year ago

something like this you have to check each value to ensure the fault in your code you're checking only last value so you're getting last value

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related