我正在寻找一个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>
这段代码会是什么样的?
答案 0 :(得分: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>
答案 1 :(得分: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..
});
答案 2 :(得分: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>
我已经为所有四个复选框添加了css类,因此可以对“名称”和“标题”复选框组进行分组。
答案 3 :(得分: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();
}