如何使用jQuery创建与文本关联的所有复选框的csv？

我在这里回答了我的问题，找到了我需要的大部分方法：

…但我还有另一个相关的问题，即如何使用jQuery创建所有选中复选框关联文本的csv

到目前为止，我所得到的，以及对缺失部分的评论，如下所示：

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>

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);
    });
});

我想，我需要循环遍历所有标签元素，附加它们的文本值和一个逗号，然后去掉最后一个逗号

使现代化 我已更新，以包含我需要的所有复选框：

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

以下是您可以执行的操作：

deptsSelected = $.map($(':checkbox:not(#' + this.id + '):checked'), function(elem, index) {
    return $("label[for='" + elem.id + "']").text();
}).join(',');

这把小提琴显示了这一点：

以下是我使用的两个新函数的文档：

地图：

加入：

您可以使用加入功能从复选框映射生成csv，不包括“全选”复选框

以下是您可以执行的操作：

deptsSelected = $.map($(':checkbox:not(#' + this.id + '):checked'), function(elem, index) {
    return $("label[for='" + elem.id + "']").text();
}).join(',');

这把小提琴显示了这一点：

以下是我使用的两个新函数的文档：

地图：

---

join:

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

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

---

粗略演示：

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

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

粗略演示：

这里正在全面演示您的目标

下面是一些方便的函数，用于查找复选框的状态

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

为了实际打印复选框的值，我在复选框中添加了数据属性数据值

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

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

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

这里是充分的工作，希望展示你的追求

下面是一些方便的函数，用于查找复选框的状态

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

为了实际打印复选框的值，我在复选框中添加了数据属性数据值

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

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

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

---

@克莱·香农，很好！很高兴能帮上忙。@ClayShannon，很好！很高兴能帮上忙。