Checkbox :checked detection with jQuery

Question

I have a check box that will if checked send a gift as a monthly gift. If check box is unchecked the gift is a single gift.

What I have:

<div id="monthly-right">
    <input type="checkbox" name="level_autorepeat" id="level_autorepeat" value="false" /> Yes, automatically repeat this gift every year on this date.</div>
<div id="donation-length"></div>

What I need to display if checked:

<div id="monthly-right"><input type="checkbox" name="level_autorepeat" id="level_autorepeat" value="false" /> Yes, automatically repeat this gift every year on this date.</div>
<div id="donation-length">
    <input type=hidden name="sustaining.frequency" id="sustaining_frequency" value="monthly" />
    <input type="hidden" name="sustaining.duration" id="sustaining_duration" value="0" />
</div>

And back if unchecked

So do you actually want to see the inputs, or just add the hidden inputs that the user won't see? — Jeff B
– Jeff B, Commented May 2, 2012 at 16:45
Do you really want the radio button to change into a checkbox? — Jeff B
– Jeff B, Commented May 2, 2012 at 16:58

Nicola Peluchetti · Accepted Answer · 2012-05-02 16:52:01Z

4

I would do

$('#check').click(function() {
    var type = $(this).is(':checked') ? "checkbox" : "radio";
    var input_r_or_c = $('<input />', {
        type: type,
        name: "level_autorepeat",
        id: "level_autorepeat",
        value: "false"
    });
    if ($(this).is(':checked')) {
        var input1 = $('<input />', {
            type: "hidden",
            name: "sustaining.frequency",
            id: "sustaining_frequency",
            value: "monthly"
        });
        var input2 = $('<input />', {
            type: "hidden",
            name: "sustaining.duration",
            id: "sustaining_duration",
            value: "0"
        });
        $('#donation-length').append(input1).append(input2);
    } else {
        $('#donation-length').empty();
    }
    $('#monthly-right input').replaceWith(input_r_or_c);
});

http://jsfiddle.net/vKLWA/1/

answered May 2, 2012 at 16:52

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

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

4 Comments

Jeff B Over a year ago

He's got to have a typo in his question, right? What is the usage model for having two checkbox/radio buttons to make this work, and why would one change? Your answer does exactly what his html suggests, but it just seems... bizarre.

Nicola Peluchetti Over a year ago

@JeffB yes it's bizarre, but that's what he asked. If he intended another thing i will change my code :)

Jeff B Over a year ago

I understand. I am not criticizing your answer, just wondering aloud to a fellow answer-er.

TikaL13 Over a year ago

There was a typo guys, sorry about that.

Jeff B · Accepted Answer · 2012-05-02 16:52:27Z

1

If these are hidden inputs, I would do this on the server side. Otherwise, if javascript is disabled, the user will have no idea that the checkbox is not doing anything and may inadvertently make a single or reoccurring contribution.

Hiding and showing hidden inputs will not affect whether they are sent to the server on submit anyway. You will need to actually delete them from the DOM, or move them outside of your current form.

So basically, always send the hidden inputs, but on the server side, ignore the frequency/duration unless the checkbox value is set.

If you still want to do it with javascript anyway, you would need to do this:

var freq = '<input type=hidden name="sustaining.frequency" id="sustaining_frequency" value="monthly" /><input type="hidden" name="sustaining.duration" id="sustaining_duration" value="0" />';

$('#monthly-right').on('change', '#level_autorepeat', function() {
   if($(this).is(':checked')) {
       $('#level_autorepeat').html(freq);
   } else {
       $('#level_autorepeat').html("");
   }
}

The other answers show you how to check if a checkbox is checked, but you really need to watch for when it changes using an onchange handler, which is done via .on(). I attach the handler to the parent, and watch when the checkbox changes. If the checkbox is checked, I add the frequency/duration code (stored in a variable) into the div, otherwise I clear the HTML in the div. You could do this a number of ways, including keeping the contents in another div outside of your form, and moving/copying the contents into the div.

edited May 2, 2012 at 16:52

answered May 2, 2012 at 16:46

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

1 Comment

TikaL13 Over a year ago

Thank you for the explanation. I understand totally regarding ths being done on the server side, unfortunately this has to be done on the client side so the user must have JavaScript enabled. I am going to try this and see if this works for me. Thanks again!

Adrian Serafin · Accepted Answer · 2012-05-02 16:43:27Z

0

This is how you can check if your checkbox is 'checked' using jquery:

$('#your_checkbox_id').is(':checked');

answered May 2, 2012 at 16:43

Adrian Serafin

7,7315 gold badges49 silver badges70 bronze badges

1 Comment

TikaL13 Over a year ago

How would it check if it's unchecked? I would like to say if checked show these if unchcked do not add these hidden inputs to form

coder · Accepted Answer · 2012-05-02 16:44:43Z

0

Try this

$('#checkBox').attr('checked');

(or)

$('#checkBox').prop('checked');

answered May 2, 2012 at 16:44

coder

13.2k32 gold badges116 silver badges221 bronze badges

Comments

Ollie · Accepted Answer · 2012-05-02 16:45:30Z

0

you can use

 $('#donation-length').hide();
 if ($('#level_autorepeat').is(':checked')){
     $('#donation-length').show();
 }

answered May 2, 2012 at 16:45

Ollie

6564 silver badges13 bronze badges

Collectives™ on Stack Overflow

Checkbox :checked detection with jQuery

5 Answers 5

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related