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

これは完全に機能する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 に答える