CODEWITHSUNDEEP
javascriptjquerycheckbox
Raimond van Mouche
Raimond van Mouche

Reputation: 97

Auto check checkboxes based on select field

I have working code to check checkboxes but it only works if the first checkbox is already checked. Do you guys maybe have any idea why?

HTML:

<p id="ullman_seats"><input class="choice" type="checkbox" name="option['option']" value="3000"> Ullman seats
    <select id="select_ullman">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</p>
<p id="ullman_seats_2"><input class="choice" type="checkbox" name="option['option']" value="3000"> Ullman seats</p>
<p id="ullman_seats_3"><input class="choice" type="checkbox" name="option['option']" value="3000"> Ullman seats</p>
<p id="ullman_seats_4"><input class="choice" type="checkbox" name="option['option']" value="3000"> Ullman seats</p>

jQuery (safe because it will be implemented in WordPress)

jQuery('#select_ullman').change(function () {
        if (jQuery(this).val() == '2') {
            jQuery('#ullman_seats input').attr('checked', true);
            jQuery('#ullman_seats_2 input').attr('checked', true);
        }if (jQuery(this).val() == '3') {
            jQuery('#ullman_seats input').attr('checked', true);
            jQuery('#ullman_seats_2 input').attr('checked', true);
            jQuery('#ullman_seats_3 input').attr('checked', true);
        }if (jQuery(this).val() == '4') {
            jQuery('#ullman_seats input').attr('checked', true);
            jQuery('#ullman_seats_2 input').attr('checked', true);
            jQuery('#ullman_seats_3 input').attr('checked', true);
            jQuery('#ullman_seats_4 input').attr('checked', true);
        }
   }

Upvotes: 1

Views: 1877

Answers (2)

adeneo
adeneo

Reputation: 318182

You're using the wrong method, you could change .attr('checked', true) to .prop('checked', true) etc. to make it work, but there's a much easier way to do this

jQuery('#select_ullman').on('change', function() {
    $('.ullman_seats input').prop('checked', function(i, prop) {
        return i < this.value;
    }.bind(this));
}).trigger('change');

FIDDLE

Use the callback for prop() and compare the index of each element directly

Upvotes: 2

dsdeveloper
dsdeveloper

Reputation: 92

You must use .prop('checked', true); 

jQuery('#select_ullman').change(function () {
        if (jQuery(this).val() == '2') {
            jQuery('#ullman_seats input').prop('checked', true);
            jQuery('#ullman_seats_2 input').prop('checked', true);
        }if (jQuery(this).val() == '3') {
            jQuery('#ullman_seats input').prop('checked', true);
            jQuery('#ullman_seats_2 input').prop('checked', true);
            jQuery('#ullman_seats_3 input').prop('checked', true);
        }if (jQuery(this).val() == '4') {
            jQuery('#ullman_seats input').prop('checked', true);
            jQuery('#ullman_seats_2 input').prop('checked', true);
            jQuery('#ullman_seats_3 input').prop('checked', true);
            jQuery('#ullman_seats_4 input').prop('checked', true);
        }    }

and for check checkbox is checked

if ($('#id').is(':checked') == true) {
            //Do something
        }
        else {
            //Do something else
        }

Upvotes: 0

Related Questions