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

它可能不漂亮，但它完成了这项工作;）