Question

I am not yet familiar with jQuery, so it’s been difficult to get the syntax correct for this.
I’m trying to select or unselect all the elements of a selectlist element, all at once, based on whether a checkbox is checked or not.

I found some help here at SO, but after a lot of looking and testing, need to ask the community…

In the if/else branch below, the else branch works correctly:

   if ($('input[name="select_markers"]:checked').length > 0) {
        $("#markerlist").prop('selected',true);
    } else {
        $('form select option').prop('selected',false);
    }

However, this affects all the select elements in the form, which I don’t want. I only want to affect the element #markerlist, which I am attempting to do in the if branch — but I cannot get this part to work.

I’ve seen many other examples that iterate over a select element, but I’d like to get this cleaner syntax to work, if I can.

TIA,
rixter

Answer 1

I’d suggest:

$('input[name="select_markers"]').change(
    function(){
        if ($(this).is(':checked')){
            $('#markerlist').find('option').prop('selected','selected')
        }
        else {
            $('#markerlist').find('option').prop('selected',false)
        }
    });

JS Fiddle demo.