Question

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

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

我知道如何隐藏/显示按钮flip-ch1，但我无法按下其他按钮。

我这里有一个脚本：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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') ，如下所示

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: