jQuery對話框，複選框和模態外的設置值

Question

在jQuery UI對話框中使用某些問題並在其中使用複選框值。我所擁有的是一個表格，其中包含前幾個選項以及一個表示「更多」的鏈接。當用戶點擊它時，他們打開一個對話框，並可以從完整的選項列表中進行選擇。

隨着第一批覆選框（而不是在對話框），點擊時，我然後提交表單使用我設置的值設置爲隱藏字段：

HTML

<div class="col cuisines cuisineSelect"> 
<ul> 
<li><input name="cuisine" value="165" type="checkbox" id="c-165"><label for="c-165">British</label></li> 
<li><input name="cuisine" value="911" type="checkbox" id="c-911"><label for="c-911">Chinese</label></li> 
<li><input name="cuisine" value="1047" type="checkbox" id="c-1047"><label for="c-1047">European</label></li> 
</ul> 
</div> 

Javascript功能來添加到隱藏字段

$(function() { 
    $('.cuisineSelect input').click(updateHiddenCuisineValues); 
    updateHiddenCuisineValues(); 
}); 

function updateHiddenCuisineValues() { 
    var allVals = []; 
    $('.cuisineSelect :checked').each(function() { 
    allVals.push($(this).val()); 
    }); 
    $('#cuisineString').val(allVals) 
} 

這工作得很好，我可以在我的#cuisineString中看到它正在填充。

但是我的對話框，我通過產卵：

對話框的Javascript

$("#moreCuisines").click(function(){ 
    $("#cuisineExtra").dialog({ 
     width: '200', 
     dialogClass: 'cuisineSelect', 
     buttons: { 
      "Refresh Search": function() {(
       $(this).dialog("close") 
      );} 
     }, 
    }); 
    return false; 
}) 

對話框DIV HTML

<div id="cuisineExtra" class="hiddenSearchPanel" title="Available Cuisines"> 
<div class="col"> 
<ul> 
<li><input name="cuisine" value="165" type="checkbox" id="ch-165"><label for="c-165">British</label></li> 
<li><input name="cuisine" value="911" type="checkbox" id="ch-911"><label for="c-911">Chinese</label></li> 
<li><input name="cuisine" value="1047" type="checkbox" id="ch-1047"><label for="c-1047">European</label></li> 
<li><input name="cuisine" value="166" type="checkbox" id="ch-166"><label for="c-166">French</label></li> 
<li><input name="cuisine" value="167" type="checkbox" id="ch-167"><label for="c-167">Indian</label></li> 
<li><input name="cuisine" value="1027" type="checkbox" id="ch-1027"><label for="c-1027">Indonesian</label></li> 
</ul> 
</div> 
</div> 

我看不出做如果我在這裏單擊一個複選框，它不會在DIV中填充，但是如果我關閉它並單擊o在對話框外部，它不僅填充了#cuisineString的最新點擊，而且還包含我在對話框中選中的所有對象。

我確定我需要添加一些東西，但一直撕裂我們的頭髮到它是什麼！

最後，我應該開始一個新的問題，但如果任何人有一個想法，我也想做的是，如果有人說在對話框或頁面上點擊「英國」，那麼它應該檢查兩個框對話框和原始對話框，並將該值添加到#cuisineString，因爲我將前幾個選項加倍。

Answer 1

編輯： 因爲JQuery對話框將你的「popup」-div複製到它自己的包含div的複選框中，所以複選框會釋放你綁定到click事件的函數。如果改爲使用實時功能，這樣它應該工作，你希望它：

$(function() { 
    $('.cuisineSelect input').live('change',updateHiddenCuisineValues); 
    updateHiddenCuisineValues(); 
}); 

相反的：

$('.cuisineSelect input').click(updateHiddenCuisineValues); 

---

要回答你的問題的有關如何將最後一部分同步內部和對話外的複選框，我想出了這個解決方案：

function updateHiddenCuisineValues() { 
    //the next four lines checks or de-checks any checkboxes with same name and value as the one just clicked 
    if($(this).is(':checked')) 
    $('[name="'+$(this).attr('name')+'"][value="'+$(this).attr('value')+'"]').attr('checked','checked'); 
    else 
    $('[name="'+$(this).attr('name')+'"][value="'+$(this).attr('value')+'"]').removeAttr('checked'); 
    var allVals = []; 
    $('.cuisineSelect :checked').each(function() { 
    if($.inArray($(this).val(),allVals) == -1) //this ensures that the same value won't be added more than once 
     allVals.push($(this).val()); 
    }); 
    $('#cuisineString').val(allVals) 
} 

它可能不漂亮，但它完成了這項工作;）