2

私はJavascriptまたはjQueryソリューションを探しています。どちらも機能します。

とにかく、ユーザーがラジオボタンの選択肢の1つを選択すると、別のチェックボックスのセットが表示されるようにします。したがって、ユーザーが[名前で]を選択すると、名前のチェックボックスが表示されます。次に、ユーザーが[タイトル別]を選択すると、名前のチェックボックスが消え、タイトルのチェックボックスが表示されます。

ページが読み込まれ、オプションが選択されていない場合、チェックボックスは表示されません。

HTMLは次のようになります。

<table>
    <tr>
        <td><input type="radio" name="selectType" value="byName" />By Name</td>
        <td><input type="radio" name="selectType" value="byTitle" />By Title</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="selectName1" />Name 1</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="selectName1" />Name 2</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="selectTitle1" />Title 1</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="selectTitle2" />Title 2</td>
    </tr>
</table>

このコードはどのようになりますか？

4

4 に答える 4

1

データ属性を使用して、チェックボックスのグループを参照します。このようにして、コードを非常に柔軟で邪魔にならないようにすることができます。

$('.type-check').change(function() {
    $('.type-group').hide().filter('.type-group-' + $(this).data('type')).show();
});

HTML サンプル:

<tr>
    <td><input type="radio" name="selectType" class="type-check" data-type="name" value="byName" /> By Name</td>
    <td><input type="radio" name="selectType" class="type-check" data-type="title" value="byTitle" /> By Title</td>
</tr>

http://jsfiddle.net/D8s9G/

于 2013-02-26T19:44:37.160 に答える
0

ここに実用的なソリューションがあります - http://jsfiddle.net/FloydPink/fkvSg/

jQuery:

$('.name').closest('tr').toggle(false);
$('.title').closest('tr').toggle(false);

$('input[name=selectType]').change(function () {
    var byNameSelected = $(this).val() == 'byName';
    $('.name').closest('tr').toggle(byNameSelected);
    $('.title').closest('tr').toggle(!byNameSelected);
});

HTML:

<table>
    <tr>
        <td>
            <input type="radio" name="selectType" value="byName" />By Name</td>
        <td>
            <input type="radio" name="selectType" value="byTitle" />By Title</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="name" name="selectName1" />Name 1</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="name" name="selectName2" />Name 2</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="title" name="selectTitle1" />Title 1</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" class="title" name="selectTitle2" />Title 2</td>
    </tr>
</table>

「名前」および「タイトル」チェックボックスのグループをグループ化できるように、4 つのチェックボックスすべてに css クラスを追加しました。

于 2013-02-26T19:42:33.083 に答える
0

名前で入力を選択し、関連する入力を表示または非表示にすることができます。

    $('input[value*="byName"]').click( function() {

    $('input[name*="selectName1"]').show();
    $('input[name*="selectTitle1"]').hide();
}

    $('input[value*="byTitle"]').click( function() {

    $('input[name*="selectName1"]').hide();
    $('input[name*="selectTitle1"]').show();
}
于 2013-02-26T19:42:51.310 に答える
0

最初にチェックボックスのクラスを与えます..

<input type="checkbox" name="selectName1" class="name"/>Name 1
<input type="checkbox" name="selectName2" class="name"/>Name 2

タイトルについても同じことを行い、「タイトル」というクラス名を付けて、ラジオについても..

<input type="radio" name="selectType" value="byName" class="radioName" />

それから;

$(document).ready(function () {
   $('.radioName').click(function () {
      $('.name').show();
      $('.title').hide();
   });

   //same logic for titles..
});
于 2013-02-26T19:37:14.593 に答える