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

我有一个带有多个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();

功能

hideControl

将隐藏所需的输入。功能

showControls

将显示隐藏的所需输入

我的代码可以工作，但有一个问题我想不出解决方案。选中具有

终止符

属性的框并选中不具有

终止符

属性的框，然后“取消选中”不具有

终止符

属性的框后，会出现问题

当第一次使用

终止符
属性选中该框时，分隔符将按预期隐藏

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

我如何解决这个问题

我创建它是为了显示代码和实际问题。您可以通过跳入jFiddle上的“1:b）更多问题”部分重新创建问题，然后选中“红色”框和“绿色-终止符”框，最后取消选中“红色”框。您将看到下面的分隔符将如何显示在应该隐藏的位置，因为“绿色-终止符”仍处于选中状态“
下面的代码表示“如果任何具有类型
复选框的输入正在更改”

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

当您取消选中“红色”复选框时，
此
=“红色”，并且红色未被选中，因此…它会自动转到显示分隔符的else状态，以确保
showControls
仅在取消选中带有
数据终止符
属性的复选框时才会被调用

更改此项：

...

} else {
    showControls(existingElements, className);
}

到

更新的JSFIDLE:
您应该检查复选框的“选中”状态，并在每次更改时设置数据终止符属性

差不多

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

你能发布一个JSFIDLE来显示问题吗？@rahul我刚刚创建了一个。你可以在这个链接上找到它。如果你转到“1:b）更多问题”部分，然后选中“红色”框，然后选中“绿色-终止符”框，最后取消选中“红色”框，你就可以创建问题了“谢谢你的回答。我不确定我是否在这里跟随你。如何使用身份证？如果您在fiddler中查看我的html代码，每个复选框都有一个ID。当div被隐藏时，当您取消选中一个未终止的复选框时，if station将失败b/c当前复选框为
未（'checked'）
，因此您的showControls将运行。你明白吗？不明白我还是不明白。你介意更新提琴吗？我试着写得尽可能简单，请看编辑后的答案。这段代码确实有效。你能解释一下为什么这个代码有效吗？使用$（this）有什么问题？每次选中复选框时，都需要确定是否选中了带有“data terminator”的元素，而不管“this.checked”是否为$（this.data（'terminator'）是吗？这段代码很有效，但有点过头了@DavidDomain的代码是更好的答案，如果有多个元素的数据终止符设置为“true”，这会起作用。@Nayish-谢谢，这更干净。；-）如果有多个元素具有“data terminator”属性，这会起作用吗？@rahul-那么您必须确保所有元素都已选中或未选中。如果这是你想要的。
$("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);
  }
});