如何使複選框在勾選時顯示不同的按鈕

-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

如何使複選框在勾選時顯示不同的按鈕

回答

相關問題