jQuery - 選項按鈕重置取消

我有一個複選框，指示用戶想要吃晚飯。在這個複選框下面有幾個單選按鈕，用戶可以從中選擇他/她的晚餐選項。我正在尋找兩件事情發生...jQuery - 選項按鈕重置取消

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

如果用戶取消選擇晚餐，我無法確定爲什麼不選擇晚餐選項。一個事件是否取消了另一個事件？有什麼想法嗎？

來源

2011-09-23 webworm

尋找[像這樣的東西]（http://jsfiddle.net/Shef/4Vf49/）？ – Shef

準確！感謝Shef！有沒有辦法給你信用？ – webworm

太好了，我把它作爲答案發布。 – Shef

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

來源

2011-09-23 06:04:55 Shef

首先發布Shef的答案。不過，@ rfausak的回答也很棒。 – webworm

使用JQuery的.change()事件而不是click()。在複選框更改之前執行click()。

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

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

來源

2011-09-23 05:56:07

感謝您解釋click（）事件在更改之前正在執行。這真的有幫助！ – webworm

jQuery - 選項按鈕重置取消

回答

相關問題