如何使用 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.

Answer 1

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.

Answer 2

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

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

    </script>