jQuery-选项按钮重置已取消

我有一个复选框，指示用户想要晚餐。此复选框下有几个单选按钮，用户可以从中选择他/她的晚餐选项。我期待着两件事发生

1） 每当用户“检查”他们想要晚餐时，我都会选择默认的晚餐选择选项。当用户“取消选中”晚餐选项时，我希望取消选择所有晚餐选项。在我尝试添加额外的jQuery选项之前，所有这些都可以正常工作

2） 如果用户选择了晚餐选项，我希望复选框指示用户希望选中晚餐。最后一个选项似乎否定了第一个选项

我在这里创建了一个JSFIDLE.net示例

我也在这里粘贴了代码，例如

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的事件而不是

单击（）

<代码>单击（）在复选框更改之前执行

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

---

在JQuery 1.6+中也使用而不是

attr（）！谢谢谢夫！有什么方法可以给你评分吗？太好了，我把它作为一个答案贴出来。感谢你解释click（）事件是在更改之前执行的。那真的很有帮助！当谢夫先把它贴出来时，给了他答案。然而，@rfausak的回答也很好。
// 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
    }
});

// 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
    }
});