チェックボックスをオンにしたときにチェックボックスに異なるボタンを表示する方法

Question

2つのチェックボックスがあります。最初のチェックボックスをクリックすると、最初のチェックボックスに割り当てられたボタンが表示されます。

ユーザーが2番目のチェックボックスをクリックすると、表示されるはずのボタンが表示されますが、2番目のチェックボックスをクリックすると非表示にする最初のチェックボックスのボタンも表示されます。

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

こんにちは、私はあなたがこの

のような何かを探してい願っていますが、それはあなたのお役に立てば幸いです。

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