jquery：根据多个复选框数组中的特定选中复选框切换字段集答案

【问题标题】：jquery: toggle a fieldset based upon a specific checked checkbox in an array of multiple checkboxesjquery：根据多个复选框数组中的特定选中复选框切换字段集
【发布时间】：2013-07-23 14:25:34
【问题描述】：

使用 jquery，给定多个复选框，如果选中/取消选中特定复选框，我们将如何打开/关闭字段集？（可以选择多个复选框，因为这是多个）

我已经尝试过将 ':checked' 和 'jQuery.inArray' 与 toggle() 一起使用，但还没有成功。没有脚本的 HTML 示例：

<form>

 Which food group do you like?
 <input type="checkbox" name="nutrition[]" value="Fruit">
 <input type="checkbox" name="nutrition[]" value="Vegetables">
 <input type="checkbox" name="nutrition[]" value="Sweets">

<!-- show this input (toggle on/off) only if 'Fruit' is one of the checked boxes-->
<fieldset id="someid" style="display:none;>
 You chose Fruit! Name one fruit: <input type="text" name= "afruit" />
</fieldset>

</form>

这是基于 Jason P 的回答的完整 html + 脚本，使用 id 作为选择器：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
window.onload = function() {
$('#fruitid').change(function(e) {
    $('#someid').toggle(this.checked);
});
};
</script>
</head>
<body>
<form>
 Which food group do you like?
 <input type="checkbox" name="nutrition[]" value="Fruit" id="fruitid">
 <input type="checkbox" name="nutrition[]" value="Vegetables">
 <input type="checkbox" name="nutrition[]" value="Sweets">

<!-- show this input (toggle on/off) only if 'Fruit' is one of the checked boxes-->
<fieldset id="someid" style="display:none;">
 You chose Fruit! Name one fruit: <input type="text" name= "afruit" />
</fieldset>

</form>
</body>
</html>

【问题讨论】：

Show/Hide Field using Jquery based on user input 的可能重复项

标签： jquery

【解决方案1】：

$('input[value="Fruit"]').change(function(e) {
    $('#someid').toggle(this.checked);
});

在“水果”复选框中添加一个类或 id 可能是个好主意，这样您就可以使用更好的选择器。

【讨论】：

请您使用诸如之类的 id 来显示脚本除了 input[value="Fruit"] 之外的复选框名称 ... 例如 input[name='nutrition[]'] ...
jQuery 学习网站很有帮助。你要找的是第一个例子：$('#fruitid')learn.jquery.com/using-jquery-core/selecting-elements。
哦，提交后，各种条目都经过验证。如果再次显示表单，则选中的框正确保持选中状态（与这篇文章无关），但现在即使选中了框，字段集也不再显示。请问这将如何解决？（我尝试了添加 .submit 的相同代码，但没有运气。） ps。不确定这是否应该是一个全新的问题...
您还需要在页面加载时运行现有的更改逻辑。
$(document).ready(function() { $('#someid').toggle($('#fruitid').prop('checked')); }); 应该可以工作。

【解决方案2】：

尝试如下：

HTML

<input type="checkbox" name="nutrition[]" value="Fruit" class="fruit">

$(".fruit").change(function(){
    if($(this).is(':checked')){  
        $("#someid").css("display","block");
    }else{
        $("#someid").css("display","none");
    }
});

注意：我已将 class 属性添加到复选框，因此您可以为每个复选框执行与上述相同的操作。

【讨论】：

谢谢。 if else 语句使其易于阅读，但是某处似乎存在一个小错误。无法让它工作。
你能告诉我你在使用上面的代码时遇到了什么错误吗？
当然 - 小提琴：jsfiddle.net/7AtGg '#solmeid' 输入没有切换
我已经更新了我的答案，请立即使用，我已经尝试过了，它会很好用。这是我的语法错误，我忘记将 ':checked' 放在单引号中。
是的，就是这样。 jsfiddle.net/7AtGg/1 也许这也可以解决：提交时，为了验证表单条目，“#someid”字段集不再显示，即使相关复选框/s 已被选中。 Jason P 的解决方案也存在同样的问题。请问有什么想法吗？