如果至少有一个选定项目具有自定义属性，如何隐藏HTML5分隔符

How to hide HTML5 dividers when if at least 1 selected item has a custom attribute?

本文关键字：何隐藏 隐藏 分隔符 HTML5 自定义属性 有一个 项目 如果      更新时间：2023-09-26

我有一个带有多个HTML复选框的表单。只有至少有一个复选框具有名为"terminator"的自定义HTML5属性时，我才想隐藏一些分隔符。否则我会想展示分隔符。

我试图通过使用change()事件来检查是否具有terminator属性来实现这一点。

以下是我所做的。

$("input[type='checkbox']").change(function(e) {
    var className = 'terminated_' + getContronId($(this).attr('name'));
    var existingElements = $('#survey-optional-controls').val().split('|') || [];

    //Hide all groups that have the class equal to className
    if( $(this).is(':checked') ){
        if( $(this).data('terminator') ){
            hideControls($(this), existingElements, className);
        }
    } else {
        showControls(existingElements, className);
    }
}).change();

函数hideControls将隐藏所需的输入。功能showControls将显示所需的输入（如果有）。

我的代码有点工作，但有一个问题我无法找到解决方案。在选中一个具有terminator属性的框并选中一个不具有terminator属性的框，然后"取消选中"一个没有terminator属性的框后，就会出现问题。

当第一次选中具有terminator属性的框时，分隔符会按预期隐藏。

然后，当取消选中一个没有terminator属性的框时，它会显示应该隐藏的分隔符，因为我还有一个带有terminator属性的复选框。

如何解决此问题？

我创建了这个jFiddle来展示代码和实际问题。您可以跳到jFiddle上的"1:b）更多问题"部分，然后选中"红色"框，再选中"绿色-终结者"框，最后取消选中"红色的"框，从而重新创建问题。您将看到下面的分隔符将如何显示在它们应该隐藏的位置，因为"绿色终止符"仍然被选中"

您应该检查复选框的"已检查"状态，并在每次更改时设置数据终止符属性。

类似的东西

$("input[type='checkbox']").change(function(e) {
  var className = 'terminated_' + getContronId($(this).attr('name'));
  var existingElements = $('#survey-optional-controls').val().split('|') || [];
  var isTerminatorChecked = $("input:checkbox[data-terminator='Yes']").is(":checked");
  //Hide all groups that have the class equal to className
  if (isTerminatorChecked) {
    hideControls($(this), existingElements, className);
  } else {
    showControls(existingElements, className);
  }
});

更新的fiddle

为了确保只有当带有data-terminator属性的复选框未选中时才会调用showControls，

更改此项：

...
} else {
    showControls(existingElements, className);
}

至

...
} else if ($(this).is("[data-terminator]")) {
    showControls(existingElements, className);
}

更新的jsFiddle：http://jsfiddle.net/8yf0v3xt/10/

下面的代码说"如果任何类型为checkbox的输入正在更改"

$("input[type='checkbox']").change(function(e) { /*hide*/ }
else { /*show*/}

当您取消选中"红色"复选框this="红色"时，红色没有被选中，因此…它会自动转到显示分隔符的else语句

相关文章：