PHP if Checkbox checked show list

Question

I want to display a list based on some php parameters.

Instead of having both options appear by default (because they have the deposits parameter enabled on the post), i want to have the pay in full option enabled by default, and the payment plan option only to appear after a checkbox is checked.

I have tried a million different approaches but I have a pretty limited experience in php.

Heres the code:

<div class="wc-deposits-wrapper <?php echo WC_Deposits_Product_Manager::deposits_forced( $post->ID ) ? 'wc-deposits-forced' : 'wc-deposits-optional'; ?>">
<?php if ( ! WC_Deposits_Product_Manager::deposits_forced( $post->ID ) ) : ?>
    <ul class="wc-deposits-option">
        <li><input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit" /><label for="wc-option-pay-deposit">Pay Deposit</label></li>
        <li><input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" /><label for="wc-option-pay-full">Pay in Full</label></li>
    </ul>
<?php endif; ?>

And here is my awful attempt at what I want, perhaps you can decipher it!

<div class="wc-deposits-wrapper <?php echo WC_Deposits_Product_Manager::deposits_forced( $post->ID ) ? 'wc-deposits-forced' : 'wc-deposits-optional'; ?>">
<?php if ( ! WC_Deposits_Product_Manager::deposits_forced( $post->ID ) ) : ?>

    <ul class="wc-deposits-option">
    <li><input type="radio" name="wc_deposit_option" value="no" id="wc-option-pay-full" /><label for="wc-option-pay-full">Pay in Full</label></li>
    </ul>

    <?php endif; ?>

<input type="checkbox" name="plans" value="yes">    

<?php if ( isset($_POST['plans']) ) : ?>

    <ul class="wc-deposits-option">
        <li><input type="radio" name="wc_deposit_option" value="yes" id="wc-option-pay-deposit" /><label for="wc-option-pay-deposit">Pay Deposit</label></li>
    </ul>
<?php endif; ?>

Thanks in advance for any help in this!

Answer 1

I would recommend using jQuery for this instead of a pure PHP solution. If you have requirements for a PHP solution, it is possible but as mentioned in the other comments it would require a page re-load.

This is how you could approach it in jQuery:

If you give your checkbox an ID, like: <input type="checkbox" id="plans-checkbox" name="plans" value="yes">

And you give an ID to your fields that you only want shown when the plans box is checked (only the one, because ID can only be given out once), like this:

<ul class="wc-deposits-option" id="pay-deposit-ul">

Then you can use some jQuery like this to toggle the options without having to reload the page.

// Hide the pay deposit ul by default (you could also handle this with CSS by giving display:none; to the ID)
$("#pay-deposit-ul").hide();

$("#plans-checkbox").change(function() {
    if ($(this).checked) {
        // Plans checkbox is selected
        $("#pay-deposit-ul").show(); // #pay-deposit-ul means jQuery selects the ID of the name pay-deposit-ul
    }
    else
    {
        // Plans checkbox is unselected
        $("#pay-deposit-ul").hide();
    }
 });

I hope that helps. If you have never used jQuery before, it's not something to be worried about. There are plenty of resources online which will cover the basics (like http://andreehansson.se/the-basics-of-jquery/ ) and you will find that for interactions with the user interface it is really handy and a big time saver.