0

テーブルがあります。最初の行にはクリックするアンカーがあり、2番目の行には<asp:CheckboxList />別のテーブルに展開しています。

jQueryを使用してそのテーブル内の入力にアクセスするにはどうすればよいですか?1つのリンクを使用してすべてを選択し、別のリンクを使用してすべての選択を解除したい。

<table>
    <tr>
        <td>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <!-- Anchor to click -->
                            <a onclick="do stuff" href="javascript://">Select all</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <!-- CheckboxList -->
            <table id="ctl00_commonForm_ctl00_ctl00_listCheck" class="list" border="0">
                <tbody>
                    <tr>
                        <td>
                            <!-- input to select -->
                            <input id="ctl00_commonForm_ctl00_ctl00_listCheck_0" name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input id="ctl00_commonForm_ctl00_ctl00_listCheck_1" name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked" type="checkbox"><label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

試し$(this).parent().('#list > input')ましたが、うまくいきません。私はjQueryに精通していないので、助けてください。ありがとう!

4

3 に答える 3

1

これは私があなたが必要だと思うjQueryです:

// When the select link is clicked
$('#selectall').click( function ( ) {
   \\ For each checkbox inside an element with class "link" set to checked
    $('.list input[type=checkbox]').attr('checked','checked');
});

これへのリンクを変更する必要があります:

<a id="selectall" href="javascript:void( );">Select all</a>

同様に、選択解除の場合、jQueryは次のようになります。

$('#deselectall').click( function ( ) {
    $('.list input[type=checkbox]').removeAttr('checked');
});

リンク:

<a id="deselectall" href="javascript:void( );">Select all</a>

そうしないと傷つくので、フォームのレイアウトにテーブルを使用しないように警告する必要があります。最近は非常に悪い習慣であり、divとCSSを使用して、見栄えはよくなりますが、より柔軟なレイアウトを作成できます。私は行くだろう:

<div id="select_links">
    <!-- Anchor to click -->
    <a id="selectall" href="javascript:void( );">Select all</a>
    <a id="deselectall" href="javascript:void( );">Deselect all</a>
</div>
<div class="list">
    <div class="listItem">
        <input id="ctl00_commonForm_ctl00_ctl00_listCheck_0"
               name="ctl00$commonForm$ctl00$ctl00$listCheck$0" checked="checked"
               type="checkbox">
               <label for="ctl00_commonForm_ctl00_ctl00_listCheck_0">Date</label>
    </div>
    <div class="listItem">
        <input id="ctl00_commonForm_ctl00_ctl00_listCheck_1"
               name="ctl00$commonForm$ctl00$ctl00$listCheck$1" checked="checked"
               type="checkbox">
        <label for="ctl00_commonForm_ctl00_ctl00_listCheck_1">Amount</label>
    </div>
</div>

編集:マークの権利、それはそうであるべきだったremoveAttr(checked)、ではないattr('checked',null);

于 2011-03-25T16:58:13.907 に答える
1

すべてのチェックボックスをターゲットにしてチェックボックスを設定するのと同じくらい簡単です。

$("#doIt").click(function(){
    $("input[type='checkbox']").attr("checked", true);
});

チェックを外したい場合

$("#doIt").click(function(){
    $("input[type='checkbox']").removeAttr("checked");
});

別のオプションはtoggle()、オフのチェックボックスを切り替えるために使用できるを使用することです。

$("#doIt").toggle(function() {
    $(this).text("Select All");
    $("input[type='checkbox']").removeAttr("checked");

}, function() {
    $(this).text("Deselect All");
    $("input[type='checkbox']").attr("checked", true);
});

jsfiddleのコード例。

于 2011-03-25T17:04:56.697 に答える
1

アンカータグからdhtmlコードを削除し、onclickを削除して、hrefを#だけに変更します。jqueryを使用すると、必要なのはクラスまたはIDだけです。

だからあなたは持っているべきです:

あなたのhtmlで:

<a id="select_on" class="toggle_checks" href="#">Select all</a>
<a class="toggle_checks" href="#">Select none</a>

JavaScriptで:

$('a.toggle_checks').click(function(){
   $('table.list').children('input').attr('checked', this.id == 'select_on');
});

したがって、このコードが実行しているのは、$('a.toggle_checks')がクラスtoggle_checksですべてのアンカータグを選択し、クリックイベントハンドラーをバインドすることです。$('table.list')をクリックすると、クラスリスト.children( 'input')はこれらのテーブル内の入力を選択し、attr部分はchecked属性をchecked属性に設定して、アンカータグのIDがselect_onであるかどうかをチェックし、そうでない場合はチェックしません。

于 2011-03-25T17:44:47.597 に答える