jQuery切换不适用于窗体上的图像/复选框

Question

I've got a form setup that's using DIVs as the toggles for checkboxes. I've got some jQuery code that watches the DIVs for a click, and then toggles the class to change the image. Easy peasy, right?

I had everything working great, but when I use the checkbox coupled with the product option pricing (as dictated by the plugins for the form & cart I'm using), the jQuery doesn't work.

I assumed that there was another class, or something associated with the pricing construct, overriding the code, but the DIVs look identitcal between the working and non-working version. I'm at a loss as to what's happening—the jQuery should still work based on what I can see.

You can check out the form here: http://bit.ly/YZBdbc

I've got both checkbox examples posted so you can see the difference (under "Choose your options"). The top one works as I'd like visually but doesn't add pricing, the bottom one doesn't toggle, but the pricing works. Sigh.

Thanks in advance for your help!

EDIT: Here's the jQuery code:

jQuery('#cart_option_1').click(function() {
    jQuery(this).toggleClass('active');
});
    jQuery('#cart_option_2').click(function() {
    jQuery(this).toggleClass('active');
});
    jQuery('#cart_option_3').click(function() {
    jQuery(this).toggleClass('active');
});

Here's the DIV code from the working block:

<div class='ginput_container'><ul class='gfield_checkbox' id='input_1_25'><li class='gchoice_25_1'><input name='input_25.1' type='checkbox' value='Month-to-Month +$10.00' id='choice_25_1' tabindex='2' /><label for='choice_25_1'><div id="cart_option_1b"></div></label></li>

And the code from the non-working block (which is basically identical):

<div class='ginput_container'><ul class='gfield_checkbox' id='input_1_26'><li class='gchoice_26_1'><input name='input_26.1' type='checkbox' value='Month-to-month|10' id='choice_26_1' tabindex='5' /><label for='choice_26_1'><div id="cart_option_1"></div></label></li>

Answer 1

Just make it a class.

<div class="cart_option" id="cart_option_1"></div>

And then apply the click event to the class.

$('.cart_option').on('click',function(){
    $(this).toggleClass('active');
});

Edited for clarification: You can still have the unique images applied to cart_option_1 , cart_option_1b , whatever, but the click event applies to all because they all have the class associated.