cazlouise cazlouise - 25 days ago 8
jQuery Question

how to make checkbox displaying different button when ticked

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();
}
});

Answer

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>

Comments