jQuery toggle won't work for checkbox, div remains display:block

Question

I have an input checkbox field and when the checkbox changes (user clicks or unclicks) the div below should toggle. In my style sheet I have the div paypalInputArea as display:none and when the checkbox in clicked, it should toggle, however I can't seem to get it to work. Can anyone see what is wrong with my code?

Here is my html:

<div class="checkbox-row" id="paypalCheckbox">
<input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
<label class="paymentMethodTitle"></label>
</div> 

<div class="paypalInputArea">
    <isinclude template="includes/paymentmethodsinclude" /> 
</div>

And here is my jQuery:

 $("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {
                $(".paypalInputArea").toggle();
                if ($('.paypalInputArea').is(':visible')) {
                    app.paymentAndReview.setCOContinueBtn(true);
                    $("#paypalPaymentCheckbox").attr('checked','true');
                    $('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
                } else {
                    $("#paypalPaymentCheckbox").removeAttr('checked');
                    $('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
                    app.paymentAndReview.setCOContinueBtn(false);
                }
            });
            $("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);

Please upload a sample fiddle so we can check it, it is not a whole code, as i am unable to find a class name areaExpander — DevProf
– DevProf, Commented Jul 17, 2018 at 5:15

Christopher Supertramp · Accepted Answer · 2018-07-17 05:43:42Z

$("#paypalCheckbox").on('change', function() {
        $(".paypalInputArea").toggle();
        if ($('.paypalInputArea').is(':visible')) {
            //app.paymentAndReview.setCOContinueBtn(true);
            $('#paypalCheckbox.checkbox-row .areaExpander').addClass('open');
        } else {
            $('#paypalCheckbox.checkbox-row .areaExpander').removeClass('open');
            //app.paymentAndReview.setCOContinueBtn(false);
        }
    });
    $("#paypalCheckbox.checkbox-row input").attr('checked') && app.paymentAndReview.setCOContinueBtn(true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-row" id="paypalCheckbox">
    <input type="checkbox" maxlength="2147483647" value="true" name="paypalPaymentCheckbox" id="paypalPaymentCheckbox" class="checkinput styled" />
    <label class="paymentMethodTitle"></label>
</div> 

<div class="paypalInputArea" style="display:none">
    blabla
</div>

just replace the line:

$("#paypalCheckbox.checkbox-row .areaExpander").on('change', function() {

with:

$("#paypalCheckbox").on('change', function() {

As you have an ID (which has to be unique) you dont have to use other classes or else to reach it!

you can also remove those lines as the attrribute checked is set as the user clicks on the checkbox

$("#paypalPaymentCheckbox").attr('checked','true');
$("#paypalPaymentCheckbox").removeAttr('checked');

Hope this helps!

Rylee · Accepted Answer · 2018-07-17 05:46:31Z

0

It looks like you're missing the class areaExpander from your checkbox

answered Jul 17, 2018 at 5:46

Rylee

1,6761 gold badge8 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery toggle won't work for checkbox, div remains display:block

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related