Check a box with jQuery when condition is met

Question

I have five opt-in check boxes and an unsubscribe checkbox. When I click an opt-in checkbox, if none of the opt-in checkboxes remain checked, the unsubscribe checkbox is supposed to be automatically checked. If I then check one of the opt-in boxes, the unsubscribe checkbox is supposed by be automatically unchecked.

The automatic unchecking of the unsubscribe checkbox works just fine. What I can't get to work is the automatic checking of the unsubscribe checkbox when none of the opt-in checkboxes is checked.

var $jQ = jQuery.noConflict();

$jQ("#Unsubscribed").click(function(event) {
    opt_ins_unchecked = $(":checkbox" ).not('#Unsubscribed').not(':checked').length;
    if (opt_ins_unchecked == 5 && !$jQ("#Unsubscribed").is(':checked')){
        event.preventDefault();

    } else {
            $jQ("input[name=Opt-In_Premium_Content],input[name=Opt-In_Product_Updates],input[name=Opt-In_Industry_Best_Practices],input[name=Opt-In_Events_Webinars],input[name=Opt-In_Education_Training]").attr("checked", false);
    }
});

$jQ("#Opt-In_Premium_Content, #Opt-In_Product_Updates, #Opt-In_Industry_Best_Practices, #Opt-In_Events_Webinars, #Opt-In_Education_Training").click(function() {
    opt_ins_unchecked = $(":checkbox" ).not('#Unsubscribed').not(':checked').length;
    if (opt_ins_unchecked == 5){
        $jQ("#Unsubscribed").attr("checked", true);
    }

    if (opt_ins_unchecked != 0){
        $jQ("#Unsubscribed").attr("checked", false);
    }
});

Why isn't the $jQ("#Unsubscribed").attr("checked", true); line run when I have no opt-in checkboxes checked? How can I get the unsubscribe box to be checked when I uncheck all of the opt-in checkboxes?

@DrixsonOseña I'm using jQuery 1.2.4, so this is not an option. — Keyslinger
– Keyslinger, Commented Nov 4, 2013 at 6:57
That's old you should use atleast 1.6+. even so the answers below are updated — Drixson Oseña
– Drixson Oseña, Commented Nov 4, 2013 at 7:00

Arun P Johny · Accepted Answer · 2013-11-04 06:56:31Z

1

Use .prop() to set the checked state instead of .attr()

$jQ("#Unsubscribed").prop("checked", true);

Try

var $unsubscribed = $jQ("#Unsubscribed");
var $checks = $jQ("#Opt-In_Premium_Content, #Opt-In_Product_Updates, #Opt-In_Industry_Best_Practices, #Opt-In_Events_Webinars, #Opt-In_Education_Training");

$checks.change(function () {
    $unsubscribed.prop("checked", $checks.filter(':checked').length == 0);
});

edited Nov 4, 2013 at 6:56

answered Nov 4, 2013 at 6:46

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zaheer Ahmed · Accepted Answer · 2013-11-04 06:48:51Z

0

jQuery 1.6+ recommended prop() instead of attr():

Use the new .prop() function:

$jQ('#Unsubscribed').prop('checked', true);
$jQ('#Unsubscribed').prop('checked', false);

jQuery 1.5 and below you can use attr as prop() was not available.

or you can use any jQuery:

$jQ("#Unsubscribed").removeAttr('checked');

answered Nov 4, 2013 at 6:48

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Comments

Keyslinger · Accepted Answer · 2014-03-07 18:39:44Z

0

It turns out it wasn't working because both the if statements were evaluating to true

edited Mar 7, 2014 at 18:39

answered Nov 4, 2013 at 6:58

Keyslinger

5,3247 gold badges45 silver badges52 bronze badges

Collectives™ on Stack Overflow

Check a box with jQuery when condition is met

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related