Question

我需要在单选按钮中选择性别字段，如男性和女性。

取决于男性单选按钮被选中，应该显示单选按钮中另一组特定值的体型。

与男性场一样，女性场地也会在单选按钮中显示特定的体型值。

当性别领域单选按钮被选中时如何获得依赖的单选按钮字段

Answer 1

试试这个

HTML

<label>Male</label>
<input type="checkbox" id="male_c" class="gender">
<label>Female</label>
<input type="checkbox" name="female_c" class="gender">
<div id="boy">
    <label>Male Fiels</label>
    <input type="checkbox" name="itemselect" class="example" />
</div>
<div id="girl">
    <label>Girl Fields</label>
    <input type="checkbox" name="itemselect" class="example" />
</div>

脚本

$('.gender').on('click', function () {
    if ($(this).is(':checked')) {
        if ($(this).prev().text() == 'Male') {
            $(this).siblings().prop('checked', false)
            $('#boy').show();
            $('#girl').hide();
        } else {
            $(this).siblings().prop('checked', false)
            $('#girl').show();
            $('#boy').hide();
        }
    } else {
        $('#boy,#girl').hide();
    }
});

DEMO

Answer 2

可能使用应该使用jQuery的show and hide功能

首先你需要使所有相关的单选按钮不可见，然后如果选中男性单选按钮则显示男性体型的内容

为男性和女性维护每个内容的div

Answer 3

试试这个

HTML

Gender : <input type="radio" value="Male" name="gender" /> Male  <input type="radio" value="Female" name="gender" /> Female
<br/>
Body Type :
<div id="male">
 <input type="radio" value="MaleBT" name="genderBT"  />Male Body Type 

<input type="radio" value="MaleBT1" name="genderBT"  />Male Body Type 
</div>
<div id="female">
    <input type="radio" value="FemaleBT" name="genderBT" /> Female Body Type 
 <input type="radio" value="FemaleBT" name="genderBT" /> Female Body Type 
</div>

JS

$(function(){

$('input[name=gender]').click(function(e){
    if(this.value=="Male"){
        $('#female').hide();
          $('#male').show();
    }
    else {
         $('#male').hide();
         $('#female').show();
    }
});
  $('#female').hide();
  $('#male').hide();
});

<强> DEMO HERE

如何更改单选按钮值取决于另一个单选按钮获取检查

3 个答案: