女性の値を持つラジオボタンがチェックされている場合、クラスメスを表示し、クラスの男性を非表示にします

Question

私は間違っているとは分かりません。私は2つのラジオボタンを持っています。 femaleオプションの場合は "male"クラスのドロップダウンメニューを非表示にし、femaleクラスの場合はドロップダウンメニューを表示し、男性値が選択されている場合は逆にします。ここ は、私が試したものです：

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

<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はpsedoセレクタであり、:checkedである必要があります。

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

<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 2

あなたはis()メソッド呼び出しでchecked、ない:checkedを使用しているので、あなたの問題があります。ベストプラクティスに従うには、ラジオとチェックボックスを扱うときにchangeイベントを使用する必要があります。これにより、キーボードからナビゲートするユーザーは引き続き要素を選択できます。

これで、要素のtoggle()メソッドを使用して、チェックされたラジオボタンの値を個別にチェックして、ロジックを短縮できます。これを試してみてください：

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

<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 3

checkedが疑似セレクタであり、それは:checkedのように使用する必要があります。ラジオボタンにchangeを使用することをお勧めします。あなたはそれを使用することができますまたは$(this).val()を使用して現在の値を取得し、それに基づいて要素を非表示にすることができます。

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

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

Answer 4

あなたはまた、.ATTR（...）メソッドを使用して、チェックされていない場合、属性は、それは、（そこにある「チェックする」かどうかを確認することができます以下の作業スニペットを参照してください。は定義されず、if文でfalseを返します）。ここで

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

あなたが行く：https://jsfiddle.net/uf6q6csq/1/

Answer 5

あなたは$(this).val()=='Female'で$('input[value=Female]').is('checked') を交換し、1

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

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