3

私はjQueryの初心者です。これは以前に尋ねられたことがあることは知っていますが、HTMLでそれを行う適切な方法がわかりません。

<fieldset>
    <legend>ABC</legend>
    <label class="selectAllButton"><input type="checkbox" onclick="SelectAll(this)" />(select all)</label><br />
    <table>

            <tr>
            <td>
                <input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_0" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_0">Discs</label>
                <input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_0" value="9;71;72;108;109" />
                <input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl00$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_0" class="xRefButton" />
            </td>
            </tr>

            <tr>
            <td>
                <input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_1" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_1">Drums</label>
                <input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_1" value="73" />
                <input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl01$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_1" class="xRefButton" />
            </td>
            </tr>

            <tr>
            <td>
                <input id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_2" type="checkbox" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$chkItem" /><label for="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_chkItem_2">Pads</label>
                <input type="hidden" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$pgNos" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_pgNos_2" value="70" />
                <input type="submit" name="ctl00$MainContentPlaceHolder$CategoryRepeater$ctl00$ItemRepeater$ctl02$btnXRefs" value="x-refs" id="MainContentPlaceHolder_CategoryRepeater_ItemRepeater_0_btnXRefs_2" class="xRefButton" />
            </td>
            </tr>

    </table>
</fieldset>

これをクリックしてほしい：

<label class="selectAllButton"><input type="checkbox" onclick="SelectAll(this)" />(select all)</label><br />

また、下のすべてのチェックボックスをtableオンまたはオフにします。

私は試した ：

// selects all the items in same category
function SelectAll()
{
    $(arguments[0]).siblings('table:eq(0)').find(':checkbox').attr('checked', arguments[0].checked);
}

しかし、それは機能しませんでした。

4

2 に答える 2

3

使用できます

function SelectAll(element)
{
    $(element).closest('fieldset').find('table :checkbox').prop('checked', element.checked);
}

お使いのバージョンが機能しなかった理由は、テーブルがすべて選択チェックボックスの兄弟ではないためです。これは、チェックボックスを含むラベルの兄弟です。

于 2012-12-23T19:30:33.233 に答える
2

あなたはこのようなことをしなければなりません：

$('.selectAllButton input').click(function() {
    var checked = $(this).is(':checked');
    var el = $('table input[type=checkbox]');

    if(checked) {
        el.attr('checked', 'checked');
    } else {
        el.removeAttr('checked');
    };
});

http://jsfiddle.net/yM9yf/1/

以下のコードは問題ないように見え、より単純で機能しますが、W3Cが推奨するものとは異なります。IE6で動作するかどうかはわかりません。

$('.selectAllButton input').click(function() {
   var checked = $(this).is(':checked');
   $('table input[type=checkbox]').attr('checked', checked);
});​

http://jsfiddle.net/CAYef/

便利なリンク：1。W3Cワーキングドラフト：入力タイプ=チェックボックス 2. W3C Wiki：チェックボックス 3. MSDN：チェックされた属性 4. MDN：入力

これがお役に立てば幸いです。

于 2012-12-23T20:04:56.030 に答える