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

-1

我有两个复选框，当用户点击第一个复选框时，它显示分配给第一个复选框的按钮，这很好。如何使复选框在勾选时显示不同的按钮

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

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

来源

2016-11-07 cazlouise

http://stackoverflow.com/questions/18307323/how-to-show-hide-an-element-on-checkbox-checked-unchecked-states-using的可能的复制-jquery –

@SaurabhSharma如果您阅读我的描述，您会注意到我的问题与您发布的链接不同 – cazlouise

您的示例似乎不完整，因为复选框丢失。请提供一个[最小，完整和可验证的示例]（http://stackoverflow.com/help/mcve） – secelite

你好，我希望你正在寻找这样的事情

希望它可以帮助你。

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

来源

2016-11-07 12:00:34

这看起来正确的生病给它以前，并投票你的答案，如果它解决了我的问题 – cazlouise

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

回答

相关问题