0

使用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>
4

2 回答 2

1

尝试如下：

HTML 

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

JS 

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

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

于 2013-07-23T14:45:13.917 回答
1 
$('input[value="Fruit"]').change(function(e) {
    $('#someid').toggle(this.checked);
});

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

于 2013-07-23T14:30:49.273 回答