如果检查具有女性价值的单选按钮，则显示班级女性并隐藏班级男性

Question

我不确定我做错了什么，请有人帮忙吗？我有2个单选按钮。如果是女性选项，我想隐藏带有“男性”类的下拉菜单，并显示带有女性类的下拉菜单，如果选择了男性值，则执行相反的操作。 这是我试过的：

$(document).ready(function() {
  $('input[type=radio]').click(function() {
  	if( $('input[value=Female]').is('checked') ) {
 	  	$('.female').show();
  		$('.male').hide();
  	} else if( $('input[value=Male]').is('checked') ) {
  		$('.male').show();
  		$('.female').hide();
  	} else {
 		  $('.male').hide();
  		$('.female').hide();
  	}
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>

<li class="input-container">
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_1" value="Female" type="radio">
<label for="3151_55396_8_60103_1">Female</label>
</li>
<li class="input-container">
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_2" value="Male" type="radio">
<label for="3151_55396_8_60103_2">Male</label>
</li>
</ul>

<select class="female" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);">

<option value="NOREPLY">Please select response</option>
<option value="Female - Small">Female - Small</option>
<option value="Female - Medium">Female - Medium</option>
<option value="Female - Large">Female - Large</option>
</select>
<br />
<select class="male" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);">

<option value="NOREPLY">Please select response</option>
<option value="Male - Small">Male - Small</option>
<option value="Male - Medium">Male - Medium</option>
<option value="Male - Large">Male - Large</option>
</select>

任何帮助将不胜感激！

Answer 1

您的问题是因为您在checked方法调用中使用:checked而不是is()。另请注意，要遵循最佳做法，您应该在处理广播和复选框时使用change事件，以便通过键盘导航的用户仍然可以选择元素。

话虽如此，您可以使用toggle()元素上的select方法缩短逻辑，单独检查已检查单选按钮的值。试试这个：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.testtesttest').change(function() {
    $('.female').toggle(this.value == 'Female');
    $('.male').toggle(this.value == 'Male');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
  <li class="input-container">
    <input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_1" value="Female" type="radio">
    <label for="3151_55396_8_60103_1">Female</label>
  </li>
  <li class="input-container">
    <input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_2" value="Male" type="radio">
    <label for="3151_55396_8_60103_2">Male</label>
  </li>
</ul>

<select class="female" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);">
  <option value="NOREPLY">Please select response</option>
  <option value="Female - Small">Female - Small</option>
  <option value="Female - Medium">Female - Medium</option>
  <option value="Female - Large">Female - Large</option>
</select><br />

<select class="male" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);">
  <option value="NOREPLY">Please select response</option>
  <option value="Male - Small">Male - Small</option>
  <option value="Male - Medium">Male - Medium</option>
  <option value="Male - Large">Male - Large</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

checked是一个psedo选择器，应该是:checked。

＆＃13;

＆＃13;

$(document).ready(function() {
  $('input[type=radio]').click(function() {
  	if( $('input[value=Female]').is(':checked') ) {
 	  	$('.female').show();
  		$('.male').hide();
  	} else if( $('input[value=Male]').is(':checked') ) {
  		$('.male').show();
  		$('.female').hide();
  	} else {
 		  $('.male').hide();
  		$('.female').hide();
  	}
  });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>

<li class="input-container">
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_1" value="Female" type="radio">
<label for="3151_55396_8_60103_1">Female</label>
</li>
<li class="input-container">
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_2" value="Male" type="radio">
<label for="3151_55396_8_60103_2">Male</label>
</li>
</ul>

<select class="female" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);">

<option value="NOREPLY">Please select response</option>
<option value="Female - Small">Female - Small</option>
<option value="Female - Medium">Female - Medium</option>
<option value="Female - Large">Female - Large</option>
</select>
<br />
<select class="male" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);">

<option value="NOREPLY">Please select response</option>
<option value="Male - Small">Male - Small</option>
<option value="Male - Medium">Male - Medium</option>
<option value="Male - Large">Male - Large</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 3

checked是一个伪选择器，它应该像:checked一样使用。我建议您使用change作为单选按钮。您可以使用它，也可以使用$(this).val()获取当前值，并根据该值隐藏元素。请参阅下面的工作代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('input[type=radio]').on('change', function() {
    var value = $(this).val();
    if (value == 'Female') {
      $('.female').show();
      $('.male').hide();
    } else if (value == 'Male') {
      $('.male').show();
      $('.female').hide();
    } else {
      $('.male').hide();
      $('.female').hide();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>

  <li class="input-container">
    <input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_1" value="Female" type="radio">
    <label for="3151_55396_8_60103_1">Female</label>
  </li>
  <li class="input-container">
    <input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_2" value="Male" type="radio">
    <label for="3151_55396_8_60103_2">Male</label>
  </li>
</ul>

<select class="female" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);">

<option value="NOREPLY">Please select response</option>
<option value="Female - Small">Female - Small</option>
<option value="Female - Medium">Female - Medium</option>
<option value="Female - Large">Female - Large</option>
</select>
<br />
<select class="male" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);">

<option value="NOREPLY">Please select response</option>
<option value="Male - Small">Male - Small</option>
<option value="Male - Medium">Male - Medium</option>
<option value="Male - Large">Male - Large</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您也可以使用.attr（...）方法，并检查＆＃34;是否已检查＆＃34;属性在那里（如果没有检查，它将是未定义的，并在if语句中返回false）。

if( $('input[value=Female]').attr('checked')){
    ...
} ...

在这里：https://jsfiddle.net/uf6q6csq/1/

Answer 5

您替换$('input[value=Female]').is('checked') 通过$(this).val()=='Female'并做同样的休息

＆＃13;

＆＃13;

$(document).ready(function() {
  $('input[type=radio]').click(function() {
  
  	if( $(this).val()=='Female' ) {
 	  	$('.female').show();
  		$('.male').hide();
  	} else if($(this).val()=='Male' ) {
  		$('.male').show();
  		$('.female').hide();
  	} else {
 		  $('.male').hide();
  		$('.female').hide();
  	}
  });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>

<li class="input-container">
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_1" value="Female" type="radio">
<label for="3151_55396_8_60103_1">Female</label>
</li>
<li class="input-container">
<input class="testtesttest" name="3151_55396_8_60103" id="3151_55396_8_60103_2" value="Male" type="radio">
<label for="3151_55396_8_60103_2">Male</label>
</li>
</ul>

<select class="female" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);">

<option value="NOREPLY">Please select response</option>
<option value="Female - Small">Female - Small</option>
<option value="Female - Medium">Female - Medium</option>
<option value="Female - Large">Female - Large</option>
</select>
<br />
<select class="male" name="3151_55396_9_60104" id="3151_55396_9_60104" onchange="choiceSelected('3151_55396_9_60104', this.selectedIndex);">

<option value="NOREPLY">Please select response</option>
<option value="Male - Small">Male - Small</option>
<option value="Male - Medium">Male - Medium</option>
<option value="Male - Large">Male - Large</option>
</select>

＆＃13;

＆＃13;

＆＃13;