how to make checkbox displaying different button when ticked

Question

I have two check boxes, when the user click on the first checkbox it displays the button assigned to the first checkbox, which is fine.

When the user clicks on the second checkbox it displays the button which is supposed to be displayed, however it also displays the first checkbox's button which I want to hide or remove when the second checkbox has been clicked.

Some of the html:

<div id="nxtbutton">
    <div id="next-container">
        <a href="/upload-your-artwork/<?php echo $product_sku_upload; ?>" id="nxtBtn" class="btn">Next</a>
    </div>
</div>

<div id="nextbutton">
    <div id="nextbutton-container">
        <a href="http:/create-your-artwork/?php echo $product_sku; ?>" class="btn" id="skuhide">Nexts</a>
    </div>
</div>

JavaScript:

$(document).ready(function(){
    $('#nxtBtn').hide();
    $(' input[type="checkbox"]').on('change', function () { var count = 0;
        $(' input[type="checkbox"]').each(function(){
            if($(this).prop('checked')) {
                count++;
                return;
            }
        })
        if(count > 0) {
            $('#nxtBtn').show();
        } else {
            $('#nxtBtn').hide();
        } 
    });
});

$(document).ready(function(){
    $('#skuhide').hide();
    $(' .coupe_button').click(function () {
        if($(this).prop('checked')){
            $('#skuhide').toggle();
        } else{
            $('#skuhide').hide();
        }
    });

    if($(this).prop('checked')) {
        $('#nxtBtn').hide();
    }
});

Possible duplicate of http://stackoverflow.com/questions/18307323/how-to-show-hide-an-element-on-checkbox-checked-unchecked-states-using-jquery — Saurabh Sharma, Nov 07 '16 at 11:55
@SaurabhSharma if you read my description you will notice that my question is different from the link you posted — cazlouise, Nov 07 '16 at 11:58
Your example seems to be incomplete, as the checkboxes are missing. Please provide a [minimal, complete, and verifiable example](http://stackoverflow.com/help/mcve) — secelite, Nov 07 '16 at 12:08

score 0 · Accepted Answer · answered Nov 07 '16 at 12:00

Hello I hope You Are Looking For something like this

Hope it helps you.

$('#chk1').change(function(){
        if(this.checked)
          {
            $('#nxtbutton').fadeIn('slow');
            $('#nextbutton2').fadeOut('slow');
          $('#chk2').attr('checked', false);
        }
            else
            $('#nxtbutton').fadeOut('slow');

    });
    
    $('#chk2').change(function(){
        if(this.checked)
          {
            $('#nextbutton2').fadeIn('slow');
             $('#nxtbutton').fadeOut('slow');
            $('#chk1').attr('checked', false);
            }
        else
            $('#nextbutton2').fadeOut('slow');

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chk1" value="checkBox1"/>CheckBox1
<div id="nxtbutton" style="display:none">
         <div id="next-container">
        <a href="/upload-your-artwork/<?php echo $product_sku_upload; ?>" id="nxtBtn" class="btn">Next</a>
         </div>
         </div>


        <br><br>

<input type="checkbox" id="chk2" value="checkBox2"/>CheckBox2
     <div id="nextbutton2" style="display:none">
         <div id="nextbutton-container">
           <a href="http:/create-your-artwork/?php echo $product_sku; ?>" class="btn" id="skuhide">Nexts</a>
         </div>
         </div>

this looks about right ill give it ago and vote your answer if it solve my problem — cazlouise, Nov 07 '16 at 12:53

how to make checkbox displaying different button when ticked

1 Answers1