选中复选框时，显示隐藏按钮和隐藏可见按钮

Question

我是javascript的初学者，希望你能帮我解决这个问题。

我有两个按钮在html格式和一个复选框，一个按钮应该是隐藏的，另一个是可见的。我的问题是如何在选中复选框的同时显示隐藏按钮和隐藏可见按钮。

我知道如何隐藏/显示按钮flip-ch1，但我不能这样做的其他按钮。

我这里有一个脚本：

​

$(document).ready(function() {
  $('#flip-ch1').hide();
  $('#radio').mouseup(function() {
    $('#flip-ch1').toggle();

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="radio" id="radio">

  <button class="btn_style" id="ch1">Add</button>
  <button class="btn_style" id="flip-ch1">Add</button>

</div>

​

Answer 1

将它们同时切换：

<script type="text/javascript">
    $(document).ready(function(){
 $('#flip-ch1').hide(); 
 $('#radio').mouseup(function () {
    $('#ch1').toggle();
    $('#flip-ch1').toggle();

 });
});
</script>

Answer 2

只需添加下面这一行：

$('#ch1').toggle();

因此，完整的js代码将是：

$(document).ready(function () {
    $('#flip-ch1').hide();
    $('#radio').mouseup(function () {
        $('#flip-ch1').toggle();
        $('#ch1').toggle();
    });
});

不要被.hide()搞糊涂了。它用于仅在开始时隐藏其中一个按钮。不需要在之后使用。切换复选框后看不到任何变化的原因是，当第一个按钮被隐藏时，第二个按钮得到了它的位置，该位置不会保持为空。您可以在任何主要浏览器的inspect元素中发现我提到的所有这些内容。

Answer 3

尝试使用$('#radio').is(':checked')，如下所示

​

$(document).ready(function() {
  $('#flip-ch1').hide();
  $('#radio').on('change', function() {
    if ($('#radio').is(':checked')) {
      $('#flip-ch1').show();
      $('#ch1').hide();
    } else {
      $('#flip-ch1').hide();
      $('#ch1').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="checkbox" name="radio" id="radio">

  <button class="btn_style" id="ch1">Add 1</button>
  <button class="btn_style" id="flip-ch1">Add 2</button>

</div>

​