Question

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

Answer 1

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

最好在“Fruits”复选框中添加一个类或ID，以便您可以使用更好的选择器。

Answer 2

尝试如下：

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属性添加到复选框，因此您可以为每个复选框执行上述操作。

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

2 个答案: