Question

我有两个复选框，当用户点击第一个复选框时，它会显示分配给第一个复选框的按钮，这很好。

当用户点击第二个复选框时，它会显示应该显示的按钮，但是当第二个复选框被点击时，它还会显示我要隐藏或删除的第一个复选框按钮。

一些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 1

你好，我希望你在寻找像这样的东西

希望它对你有所帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在勾选时使复选框显示不同的按钮

1 个答案: