Question

In the pasted code, the ternary code checks for the presence of a checkbox click and displays the result accordingly. The drawback is that if a user unchecks one of the boxes then it hides the checked div. I only need to hide the checked div if no boxes are ticked.

Can my code be adjusted to accommodate this or do I need to rewrite using if statements. Thanks

$(function() {
    $('input[id^=check]').on('click', function() {
        var checked = '';

        $('input:checkbox:checked').each(function (i) {
            checked += this.value + ',';     
        });

        $('.checked').show().html('Checkbox is checked: <strong>' + ($(this).is(':checked') ? checked : $(".checked").hide()) + '</strong>');
    });
});

Answer 1

Simplest way, whilst keeping your basic layout and logic, I’d say is to change your

$(this).is(':checked')

to a

checked.length > 0

Thus only hiding the div if you actually have added values to the checked-string..