关于收音机选择，显示不同的复选框选择

Question

我正在寻找一个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> 

会是什么这个代码是什么样子？

Answer 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/

Answer 2

首先给你的复选框类..

<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.. 
}); 

Answer 3

这里是一个可行的解决方案 - 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类到所有四个通道eckboxes，这样可以对“名称”和“标题”复选框进行分组。

Answer 4

您可以选择用自己的名字输入和显示或隐藏相关的输入：

$('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(); 
}