选中复选框时显示隐藏按钮并隐藏可见按钮答案

【问题标题】：When checkbox is checked show hidden button and hide the visible button选中复选框时显示隐藏按钮并隐藏可见按钮
【发布时间】：2018-01-03 13:14:23
【问题描述】：

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

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

我知道如何隐藏/显示按钮 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>

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

同时切换它们：

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

 });
});
</script>

【讨论】：

你是对的，没有发现$('#flip-ch1').hide();
我试过了，按钮 ch1 隐藏，当我选中复选框时，显示按钮翻转 ch1，但是当我取消选中复选框时，按钮 ch1 没有显示..
如何判断它们是否具有相同的“添加”内容？将内容更改为不同的。根据您的描述，我的代码有效。
正如我所说，我的代码根据您的描述工作：单击复选框将隐藏一个按钮并重复显示另一个按钮。

【解决方案2】：

只需添加这一行：

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

那么，完整的js代码应该是：

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

不要对 .hide() 感到困惑。它用于仅在开始时隐藏其中一个按钮。之后无需使用。切换复选框后您看不到任何更改的原因是，当第一个按钮被隐藏时，第二个按钮得到它的位置，该位置不会保持为空。你可以发现我在任何主要浏览器的检查元素中提到的所有这些。

【讨论】：

谢谢！！你这样的天使.. 非常感谢.. 谢谢你们的建议，我很感激.. 谢谢
我根据您与@AndyG 的讨论进行了编辑以给出解释。各位看错了，请查收。

【解决方案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>

【讨论】：