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

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

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

在 JQuery 1.6+ 中也使用prop() 而不是attr()。

Answer 2

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