在Radio Select(收音机选择）上，显示不同的复选框选择

On Radio Select, show different checkbox selection

本文关键字：选择 显示 复选框 Select Radio 收音机      更新时间：2023-09-26

我正在寻找一个Javascript或jQuery解决方案，两者都可以。

无论如何，当用户为单选按钮选择其中一个选项时，我希望显示一组不同的复选框。因此，如果用户选择"按名称"，则会显示名称复选框。然后，当用户选择"按标题"时，名称复选框将消失，标题复选框将显示。

当页面加载，并且没有选择某个选项时，不应出现任何复选框

以下是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>

这个代码会是什么样子？

我会使用数据属性来引用复选框组。通过这种方式，你可以让你的代码变得非常灵活和不引人注目：

$('.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/

首先给你的复选框类。。

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

对标题也这样做，给它们一个类名"title"，对你的收音机也这样做。。

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

那么；

$(document).ready(function () {
   $('.radioName').click(function () {
      $('.name').show();
      $('.title').hide();
   });
   //same logic for titles..
});

这里有一个有效的解决方案-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>

我已经将css类添加到所有四个复选框中，以便可以对"名称"answers"标题"复选框组进行分组。

您可以用它们的名称选择输入，并显示或隐藏相关输入：

    $('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();
}
相关文章：