jQuery对话框、复选框和模式外的设置值

jQueryUI对话框存在一些问题，并且在其中使用复选框值。我有一个表格，上面有前几个选项，还有一个链接，上面写着“更多”。当用户单击此按钮时，他们会打开一个对话框，可以从完整的选项列表中进行选择

对于第一批复选框（不在对话框中），我在单击时将其值设置为隐藏字段，然后在提交表单时使用该字段：

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>

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

这很好，我可以从我的

#cuisineString

中看到它正在流行

但是，我的对话框是由以下内容生成的：

对话框Javascript

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

对话框DIV 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>

<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中，但是如果我关闭此复选框并单击对话框外的复选框，它不仅会填充最近一次单击的

#cuisineString

，还会填充我在对话框中选中的所有复选框

我确信我需要添加一些东西，但是我一直在扯我们的头发

最后，我应该开始一个新问题，但如果有人有想法，我还想做的是，如果有人说在对话框或页面上单击“British”，那么它应该选中对话框和原始对话框中的框，并在我翻倍前几个选项时将值添加到

#cuisineString

。

编辑： 因为JQuery对话框将您的“popup”-div复制到它自己包含的div中，所以复选框会释放绑定到click事件的函数。如果您改为像这样使用live函数，它应该按照您希望的那样工作：

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

它可能并不漂亮，但它完成了任务；）

编辑： 因为JQuery对话框将您的“popup”-div复制到它自己包含的div中，所以复选框会释放绑定到click事件的函数。如果您改为像这样使用live函数，它应该按照您希望的那样工作：

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

---

它可能并不漂亮，但它完成了任务；）

在生成对话框的jQuery代码中，它使用显示为将其添加到对话框中的

dialogClass:'cuisineSelect'

…在生成对话框的jQuery代码中，它使用显示为将其添加到对话框中的

dialogClass:'cuisineSelect'

。。。