如何使用 jQuery 处理复选框的初始状态和更改？

Posted 2023-05-09

【中文标题】如何使用 jQuery 处理复选框的初始状态和更改？

【英文标题】：How to handle initial state and change of checkbox using jQuery?

【发布时间】：2020-02-05 04:12:51

【问题描述】：

我需要根据 jquery 的复选框值显示/隐藏 div：

网页加载时和 当复选框值改变时（点击/改变）

我找到了几种单独解决这些问题的方法，但是是否存在一种简单的方法来同时处理两组事件？

示例（更改）：

$(document).ready(function()
    $('#checkbox1').change(function()
        if(this.checked)
            $('#autoUpdate').show();
        else
            $('#autoUpdate').hide();
    );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-check-input" type="checkbox" id="checkbox1" checked>

<div id="autoUpdate" class="autoUpdate">
    Example
</div>

【问题讨论】：

你是否预设了复选框的值？

是的，当然，它是可变的。否则这个问题就没有意义了。

【参考方案1】：

您可以在页面加载时触发该事件：

$('#checkbox1').change();

$(document).ready(function()
    $('#checkbox1').change(function()
      console.log('fired');
      if(this.checked)
        $('#autoUpdate').show();
      else
        $('#autoUpdate').hide();
    );
    $('#checkbox1').change();
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-check-input" type="checkbox" id="checkbox1" checked>

<div id="autoUpdate" class="autoUpdate">
    Example
</div>

【参考方案2】：

只是提供一个替代方案，如果您的元素是同级元素，您可以使用 CSS 执行相同的逻辑，如果未选中前一个同级元素，则将 display none 应用于同级。

#checkbox1:not(:checked) ~ #autoUpdate 
  display: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-check-input" type="checkbox" id="checkbox1" checked>

<div id="autoUpdate" class="autoUpdate">
  Example
</div>

【讨论】：

哦，当然，有趣的替代方案，我不会想到这样做

@TomasKujal 请记住，它可以被认为是脆弱的，因为它们需要是兄弟姐妹。但是，根据您的 UI，这可能就是您所需要的。

【参考方案3】：

[我误读了这个问题，我的错。]

使用 .on() 将您的函数绑定到多个事件。

$('#element').on('click change', function(e) // e.type is the type of event fired );

查看this answer了解更多详情。