在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
中看到它正在填充。
然而,我的对话框,由我产生:
Dialog Javascript
$("#moreCuisines").click(function(){
$("#cuisineExtra").dialog({
width: '200',
dialogClass: 'cuisineSelect',
buttons: {
"Refresh Search": function() {(
$(this).dialog("close")
);}
},
});
return false;
})
Dialog 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中,但是如果我关闭它并单击对话框外的一个复选框,它不仅会填充#cuisineString
使用最新的点击,但我在对话框中检查了所有点击。
我确信我需要添加一些东西,但一直在撕裂我们的头发!
最后,我应该开始一个新的问题,但如果有人有想法,我还想做的是,如果有人说在对话框或页面上点击“英国”,那么它应该检查两个框中的对话框和原始对象,并将值添加到#cuisineString
,因为我将前几个选项加倍。
答案 0 :(得分:3)
编辑: 因为JQuery对话框在你自己的包含div中复制你的“popup”-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)
}
它可能不是很漂亮,但它可以完成工作;)