0

我在这里回答了我的问题，得到了我所需要的大部分方法：如何获得与复选框关联的标签的值（我是否破坏了 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);
}
4

3 回答 3

1

您可以使用该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

于 2013-07-17T16:32:28.907 回答
1

您需要遍历所有复选框，查看哪些复选框被选中，获取值，然后将其添加到“deptsSelected”。您还需要检查以确保当前复选框不是“chkbxSelectAll”。在选择全部或选择单个时，您都需要这样做。

      $('input[type=checkbox]').each(function () {
            if (this.checked && this.id != "ckbxSelectAll") {
                 deptsSelected +=   $("label[for='" + this.id + "']").text() + ',';
            }
        });

粗略演示：http: //jsfiddle.net/yFB6W/6/

于 2013-07-17T16:44:51.630 回答
1

这是完全工作的 JSFiddle 示例，希望能展示您所追求的。

这里有一些方便的函数来查找复选框的状态。

var checkedResults = $(".value.option").map(function (i, e) {
    return $(e).prop("checked");
}).get();
var areAllChecked = checkedResults.reduce(function (seed, value) {
    return seed && value;
}, true);
var areSomeChecked = checkedResults.reduce(function (seed, value) {
    return seed || value;
}, false);

为了实际打印复选框的值，我在复选框中添加了数据属性（data-value）。

<input type="checkbox" class="value option" data-value="2" id="ckbx2" />
<input type="checkbox" class="value option" data-value="3" id="ckbx3" />

然后我可以像这样访问它。

// Get an array with all the selected values
var result = $(".value.option:checked").map(function (i, e) {
  return $(e).attr("data-value");
}).get();

// Print the values
console.log("Change", result);

// Or stringify the array and add it to the page
$("#result").text(JSON.stringify(result));

在 JSFiddle 示例中，我更改了代码的检测和更新部分。

$("#btnDept").click(function () {
    $("#dialog").dialog({
        modal: true
    });

    function reportChange() {
        var result = $(".value.option:checked").map(function (i, e) {
            return $(e).attr("data-value");
        }).get();
        console.log("Change", result);
        $("#result").text(JSON.stringify(result));
    }

    $("#ckbxSelectAll").click(function () {
        var isChecked = $("#ckbxSelectAll").prop("checked");
        if (isChecked) {
            $(".value.option").prop("checked", isChecked);
            $("#ckbxDeselectAll").prop("checked", false);
        }
        reportChange();
    });
    $("#ckbxDeselectAll").click(function () {
        $(".value.option, #ckbxSelectAll").removeAttr("checked");
        reportChange();
    });
    $(".value.option").click(function () {
        var checkedResults = $(".value.option").map(function (i, e) {
            return $(e).prop("checked");
        }).get();
        var areAllChecked = checkedResults.reduce(function (seed, value) {
            return seed && value;
        }, true);
        var areSomeChecked = checkedResults.reduce(function (seed, value) {
            return seed || value;
        }, false);
        $("#ckbxDeselectAll").prop("checked", !areSomeChecked);
        $("#ckbxSelectAll").prop("checked", areAllChecked);
        reportChange();
    });
});
于 2013-07-17T17:08:34.913 回答