在这里回答我的问题时,我已获得所需的大部分方法:How can I get the value of labels associated with checkboxes (and did I break jsfiddle)?
...但是我还有另一个相关的问题,即“如何使用jQuery为所有选中的复选框相关文本创建一个csv?”
到目前为止,我对缺失的部分发表了评论,这里是:JS fiddler link
HTML是:
<button id="btnDept">select Depts</button>
<div id="dialog" title="Select the Depts you want to include in the report" style="display:none;">
<div>
<section class="breakAfter">
<label for="ckbxSelectAll">Select All</label>
<input type="checkbox" id="ckbxSelectAll" />
<label for="ckbxDeselectAll">Deselect All</label>
<input type="checkbox" id="ckbxDeselectAll" />
</section>
<label for="ckbx2">2</label>
<input type="checkbox" id="ckbx2" />
<label for="ckbx3" id="lbl3">3</label>
<input type="checkbox" id="ckbx3" />
</div>
</div>
CSS是:
.breakAfter {
display:block;
}
jQuery是:
var deptsSelected = '';
$("#btnDept").click(function () {
$("#dialog").dialog({
modal: true
});
$("input:checkbox").click(function () {
var checkedVal = $("label[for='" + this.id + "']").text();
if (checkedVal == "Select All") {
$(":checkbox").prop("checked", true);
$("#ckbxDeselectAll").prop("checked", false);
// How can I add all of the vals to deptsSelected (except "Select All" and "Deselect All")?
} else if (checkedVal == "Deselect All") {
$(":checkbox").prop("checked", false);
$("#ckbxDeselectAll").prop("checked", true);
deptsSelected = '';
} else {
if (deptsSelected.indexOf(checkedVal) < 0) {
deptsSelected += $("label[for='" + this.id + "']").text() + ',';
}
}
alert(deptsSelected);
});
});
IOW,我需要遍历所有标签元素,在其标签的文本值后面加上一个逗号(然后将最后一个逗号放在最后)。
更新
我更新了jsfiddle以包括我需要的所有复选框:
我在C#实用程序中创建了其余复选框:
private void button1_Click(object sender, EventArgs e)
{
string s = string.Empty;
for (int i = 4; i < 100; i++)
{
s += string.Format("<label for=\"ckbx{0}\">{0}</label><input type=\"checkbox\" id=\"ckbx{0}\" />", i);
}
textBox1.AppendText(s);
}
最佳答案
您可以使用join
函数从选中的csv
复选框(不包括“全选” map
)中生成checkbox
。
您可以执行以下操作:
deptsSelected = $.map($(':checkbox:not(#' + this.id + '):checked'), function(elem, index) {
return $("label[for='" + elem.id + "']").text();
}).join(',');
这是显示此内容的小提琴:http://jsfiddle.net/BaKYh/
这是我使用的两个新功能的文档:
map()
:http://api.jquery.com/jQuery.map/join()
:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join