Javascript 选中复选框时删除表单的一部分

我正在尝试制作一个表单，它将隐藏和显示表单的某些部分。它在一些尝试中正常工作。但当用户选择并选中一个带有类badCheckbox的选项，该选项随后显示badField时，用户选中不带类的选项badCheckbox，该选项应显示“goodField”，而不是“badField”，但该选项未隐藏且仍显示

当用户试图单独检查选项时，所有选项都只能在上面提到的情况下正常工作

有什么办法吗

//隐藏和显示div的脚本
$（'.badCheckbox'）.change（函数（）{
设checked=0；
$（'.badCheckbox'）。每个（函数（）{
如果（选中此项）{
选中+=1；
}
});
如果（选中！=0）{
$（'#badField'）.show（）；
$（“#goodField”）.hide（）；
}否则{
$（'#badField'）.hide（）；
$（'#goodField'）.show（）；
}
});
//脚本只检查三个选项中的一个
$（“.oneChecked”）。在（'click'，function（）上{
//在处理程序中，“this”是指单击的框
var$box=$（此项）；
如果（$box.is（“：checked”））{
var group=“输入：复选框[name=”+$box.attr（“name”）+“]”；
$（组）.prop（“选中”，false）；
$box.prop（“选中”，为真）；
}否则{
$box.prop（“选中”，假）；
}
});

:((

很好

这是因为用户单击第三个复选框时没有事件

当使用类
.badCheckbox
对输入进行更新（更改）时，显示/隐藏消息的功能可以工作，但当您单击第三个（没有类的地方）时，不会调用该功能

我认为您应该在所有复选框上都有一个类，并在列出更改的函数中使用它

大概是这样的：

$('.checkbox').change(function() {
    let checked = 0;
    $('.badCheckbox').each(function() {
      // ...
});

还有你的html

<input name="checkin" type="checkbox" class="checkbox oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="checkbox oneChecked badCheckbox"/>
<input name="checkin" type="checkbox" class="checkbox oneChecked"/>



有很多优化可以用来改进您的代码，比如使用收音机删除您的
oneChecked
功能，或者在选中复选框时打印正确的消息，而不是使用show/hide two
div
，但我认为您应该在将来看到它

我希望这能对您有所帮助，并欢迎使用StackOverflow


$（'#checks'）。在（'change'，'input[name=“checkin”]”上，函数（）{
如果（$（this）.is（':checked'））{
$（'#checks.oneChecked:checked'）.prop（'checked'，false）；
$（this.prop（'checked'，true）；
}否则{
$（'#checks.oneChecked:checked'）.prop（'checked'，false）；
$（this.prop（'checked'，false）；
}
if（$（'#checks.badCheckbox:checked'）.is（':checked'））{
$（'#badField'）.show（）；
$（“#goodField”）.hide（）；
}否则{
$（'#badField'）.hide（）；
$（'#goodField'）.show（）；
}
})；

:((

很好

考虑以下改进


$（函数（）{
函数checkStuff（已选中）{
如果（选中）{
$（'#badField'）.show（）；
$（“#goodField”）.hide（）；
}否则{
$（'#badField'）.hide（）；
$（'#goodField'）.show（）；
}
}
//脚本只检查三个选项中的一个
$（.box”）.on（'change'，.oneChecked'，function（）{
如果（$（this）.is（“：checked”））{
$（“.box输入[type='checkbox']”）.prop（“选中”，false）；
$（this）.prop（“选中”，true）；
checkStuff（$（this）.is（“.badCheckbox”）；
}
});
})；

:((

很好

首先，很明显，您的复选框必须像收音机一样工作。据我所知，这就是您想要做的。因此，我稍微修改了您的脚本，使复选框作为收音机输入，同时显示/隐藏段落，这取决于单击的元素是否具有类badCheckbox及其状态（checkd或not）.结果如下：

//Script to hide and show div
$('.oneChecked').click( (everyOne) => {
   //handles click (and change) on every element with class oneChecked
   //they all has it in your example
   $('.oneChecked').each( (ind, currentOne) => {
     //iterate to all elements with class oneChecked
     //and compare if matches clicked one
     if ( !$(currentOne).is($(everyOne.target)) ) {
       //other instance, not clisked one, so clear it
       //to simulate behaviour of radio input
       $(currentOne).prop('checked', false);
     }
   });

   //checks if clicked element is bad or not and show/hide your p
   if ($(everyOne.target).hasClass('badCheckbox') && $(everyOne.target).prop('checked')){
     console.log('b-s/h');
        $('#badField').show();
        $('#goodField').hide();
     } else {
     console.log('s/b-h');
       $('#badField').hide();
       $('#goodField').show();
   }

});

下面是CodePen中的一个工作示例：
为什么不使用收音机？这个问题在类型checkbox和radio上是相同的：（欢迎使用堆栈溢出。在选择器中使用
：checked
可能会有所帮助。这样，您可以将选中的元素与未选中的元素作为目标。我放弃添加：）这里，现在它可以工作了：）