模态框上的 JQuery Checked Selector 并将其返回到页面上
Posted
技术标签:
【中文标题】模态框上的 JQuery Checked Selector 并将其返回到页面上【英文标题】:JQuery Checked Selector on a modal-box and return it on the page 【发布时间】:2012-10-07 09:04:21 【问题描述】:我想要做的是,将模式框上每个复选框上选中的值返回到文本框。这个问题与this one 非常相似,但问题的目的不同。所以请看看他们两个。 :)
我有初始化模态框的代码:
<script>
var grid_modal_options =
height: 'auto',
width: '80%',
modal: true
;
function showProductsModalBox()
$("#products_modal_box").dialog(grid_modal_options);
$("#products_modal_box").parent().appendTo('form:first');
</script>
<div id="products_modal_box" title="Products" style="display: none;">
<div class="in">
<div class="grid-12-12">
<form id="products_modal_box_form" action="#" method="post">
<a href=\"javascript:;\" onclick=\"$('#products_id_textbox').val(\"input[name='checkedID[]']:checked\");$('#products_modal_box').dialog('close')();\">Submit</a>
<table>
<thead>
<tr>
<th> </th>
<th>Product</th>
</tr>
</thead>
<!-- Query for read mysql goes here (I skipped this line because it's not the main thing I'm gonna ask since it's run well) /-->
<tbody>
<?php
//read the results
while($fetch = mysqli_fetch_array($r))
print "<tr>";
print " <td><input type='checkbox' name='checkedID' value='" . $fetch[0] . "' /></td>"; //--> How to get the value of $fetch[0], collect it and return to a textbox?
print " <td>" . $fetch[0] . "</td>"; //$fetch[0] == Product ID
print "</tr>";
?>
</tbody>
</table>
</form>
</div>
</div>
</div>
正如您在上面看到的,我正在尝试使用 pseudo-selector 函数:input[name='checkedID[]']:checked
但未能返回值。还是我错过了代码?
这里是返回在模态框上检查的值的文本框:
<input type='text' id='products_id_textbox' name='products_id_textbox' />
<a href='#' onclick='showProductsModalBox(); return false;'>Choose products</a>
代码能够显示模态框。但是如何将用户从每个文本框中选择的“产品”返回到文本框products_id_textbox
?谢谢。
【问题讨论】:
【参考方案1】:用这段代码解决的问题:
<script>
$("input#checkedID").change(function ()
var str = "";
$("input:[name='checkedID[]']:checked").each(function ()
str += $(this).val() + ", ";
);
$("input#products_id_textbox").val(str);
)
.trigger('change');
</script>
以及对仅用于关闭模式框的按钮的修改:
<a href=\"javascript:;\" onclick=\"$('#products_modal_box').dialog('close')();\">Submit</a>
那个函数叫做 :checked Selector。
非常感谢您,希望对您有所帮助... :)
【讨论】:
【参考方案2】:你从 php 输出的是checkedID而不是checkedID[] 改变
print " <td><input type='checkbox' name='checkedID' value='" . $fetch[0] . "' /></td>";
到
print " <td><input type='checkbox' name='checkedID[]' value='" . $fetch[0] . "' /></td>";
【讨论】:
onclick 似乎有错误,为了清楚起见,尝试编写一个函数。您可能必须在 $('input[name="checkedID[]"]:checked') 上使用 $.each 来获取值【参考方案3】:请尝试以下代码:
myCheckbox is a class which you need to assign your checkboxes..
var checkboxValues = $('.myCheckbox:checked').map(function()
return $(this).val();
).get();
Then you can assign that values into your textbox....
$('#products_id_textbox').val(checkboxValues);
希望对你有所帮助...
【讨论】:
【参考方案4】:你的选择器应该是这样的,
$("input[name='checkedID[]']:checked")
它会为您提供名称为“checkedID[]”的所有复选框都已选中。你必须循环它来获取所有的值。
希望这会有所帮助!
【讨论】:
以上是关于模态框上的 JQuery Checked Selector 并将其返回到页面上的主要内容,如果未能解决你的问题,请参考以下文章
jquery,attr,prop,checkbox标签已有checked=checked但是不显示勾选