jQuery - 选项按钮重置取消

Question

我有一个复选框，指示用户想要吃晚饭。在这个复选框下面有几个单选按钮，用户可以从中选择他/她的晚餐选项。我正在寻找两件事情发生...

1）每当用户“检查”，他们想吃晚餐我有一个默认的晚餐选择选项选择。当用户“不检查”晚餐选项时，我希望所有晚餐选择都不被选中。所有这些工作正常，直到我尝试并添加一个额外的jQuery选项。

2）如果用户选择晚餐选项，我希望显示用户想要检查晚餐的复选框。这最后一个选项似乎否定了第一个选项。

我创建了位于这里jsfiddle.net例子... http://jsfiddle.net/ScEw2/1/

我也贴在这里例如代码...

HTML

<p><input type="checkbox" id="IsHavingDinner" name="Dinner" /> Do you want dinner?</p> 
<hr /> 
<input type="radio" id="DinnerChoiceChicken" name="DinnerChoice" value="Chicken"> Chicken<br/> 
<input type="radio" id="DinnerChoiceFish" name="DinnerChoice" value="Fish"> Fish<br/> 
<input type="radio" id="DinnerChoiceSteak" name="DinnerChoice" value="Steak"> Steak<br/> 
<input type="radio" id="DinnerChoiceVegan" name="DinnerChoice" value="Vegan"> Vegan<br/> 

的jQuery代码

// Select default dinner option otherwise deselect all options 
$('#IsHavingDinner').click(function(event) { 
    if ($('#IsHavingDinner').attr('checked')) { 
     // Select Dinner Choice Chicken by default 
     $('#DinnerChoiceChicken').attr('checked', 'checked'); 
    } else { 
     // Deselect all Dinner Choices 
     $('input[name="DinnerChoice"]').attr('checked', false); 
    } 
}) 

// If a dinner choice is selected, make sure the checkbox 
// indicating they want dinner is selected 
$('[name="DinnerChoice"]').click(function(event) { 
    $('#IsHavingDinner').attr('checked', 'checked'); 
}) 

如果用户取消选择晚餐，我无法确定为什么不选择晚餐选项。一个事件是否取消了另一个事件？有什么想法吗？

Answer 1

// Select default dinner option otherwise deselect all options 
// Listen for a change event on the having dinner checkbox 
$('#IsHavingDinner').change(function(){ 
    if($(this).is(':checked')){ // if checked 
     $('#DinnerChoiceChicken').prop('checked', true); // check a default dinner choice 
    } else { 
     $('input[name="DinnerChoice"]').prop('checked', false); // otherwise, uncheck all 
    } 
}); 

// If a dinner choice is selected, make sure the checkbox 
// indicating they want dinner is selected 
$('input[name="DinnerChoice"]').change(function(){ 
    if($(this).is(':checked')){ // if checked 
     $('#IsHavingDinner').prop('checked', true); // check having dinner 
    } 
}); 

Answer 2

使用JQuery的.change()事件而不是click()。在复选框更改之前执行click()。

$('#IsHavingDinner').change(function(event) { .. 

还可以使用prop()，而不是在JQuery中1.6+ attr()。