新手求助：勾选Checkbox时切换两个Button的显示隐藏状态

嘿，我来帮你搞定这个按钮切换的问题！你的思路是对的，但目前只处理了flip-ch1的显示/隐藏，没对另一个按钮ch1做对应的操作，所以才会出现只有一个按钮变化的情况。我帮你调整一下代码，让两个按钮能同步切换：

问题分析 #

原代码里只调用了$('#flip-ch1').toggle()，但没有对ch1按钮做相反的状态切换。另外，用mouseup事件不够精准——比如鼠标在复选框外松开也会触发事件，换成change事件更合适，它只会在复选框的勾选状态改变时触发。

修正后的完整代码 #

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

<script>
$(document).ready(function() {
  // 初始状态：隐藏flip-ch1，ch1默认显示
  $('#flip-ch1').hide();

  // 监听复选框的状态变化事件
  $('#radio').change(function() {
    // 获取当前复选框的勾选状态
    const isChecked = $(this).is(':checked');
    
    // 根据勾选状态切换两个按钮的显示/隐藏
    $('#ch1').toggle(!isChecked); // 勾选时隐藏ch1，未勾选时显示
    $('#flip-ch1').toggle(isChecked); // 勾选时显示flip-ch1，未勾选时隐藏
  });
});
</script>

代码说明 #

• 初始状态设置：页面加载完成后，先把flip-ch1隐藏，ch1默认是显示的，所以不用额外处理。
• change事件监听：当复选框的勾选状态改变时触发回调函数。
• 状态控制：通过$(this).is(':checked')获取当前是否被勾选，然后分别对两个按钮调用toggle()——toggle(布尔值)的用法是：传入true就显示元素，false就隐藏元素，这样就能精准控制两个按钮的状态相反。

这样调整后，勾选复选框时，ch1会隐藏，flip-ch1会显示；取消勾选时则反过来，完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者Rose