[英]three radio buttons with sub radio buttons need to hide or show the div using jquery
I am working on jQuery hide or show function. 我正在使用jQuery隐藏或显示功能。 I have three radio buttons and two sub radio button will be available initially if user select the first radio button and user select children first / second radio button one div will be shown in the second scneario if user select second radio button / third radio button from the parent and sub radio button second div should come. 我有三个单选按钮,如果用户选择第一个单选按钮,并且最初选择子菜单第一个/第二个单选按钮,则两个子单选按钮将首先可用;如果用户从中选择第二个单选按钮/第三个单选按钮,则会在第二个屏幕中显示一个格父级和子级单选按钮的第二个div应该出现。 I am not getting how to do the if condition 我没有如何做if条件
Here is the fiddle link 这是小提琴链接
Here is my HTML code 这是我的HTML代码
<input type="radio" value="one" checked name="number" />One
<input type="radio" value="two" name="number" />two
<input type="radio" value="three" name="number" />three
<br/>
<input type="radio" checked value="onea" name="numbers" />one A
<input type="radio" value="twoa" name="numbers" />two A
<br/>
<div class="first">First</div>
<div class="second">second</div>
<div class="third">third</div>
Here is my current jquery code 这是我当前的jQuery代码
$(".second,.third").hide();
$('input[type="radio"]').change(function () {
if ($(this).val() === 'onea' || 'twoa') {
$(".first").show();
}
});
for the first radio button was working perfectly as expected but not for second third radio button 第一个单选按钮可以正常工作,而第二个单选按钮则无法正常工作
this is what i want 这就是我要的
for example there are two scenarios 1) by default the one radio button was and one A radio button was checked the first div will show 2) if the user select two radio button / three radio button and sub one A / two A second div will show I am not getting the second scenarios 例如,有两种情况:1)默认情况下,一个单选按钮是一个,并且选中了一个单选按钮,则第一个div将显示2)如果用户选择两个单选按钮/三个单选按钮,并且选择一个A /两个A,则第二个div表明我没有第二种情况
Thanks in advance 提前致谢
Try this.. jsfiddle 试试这个.. jsfiddle
<input type="radio" value="one" name="number" />One
<input type="radio" value="two" name="number" />two
<input type="radio" value="three" name="number" />three
<br/>
<input type="radio" checked value="onea" name="numbers" id="first" />one A
<input type="radio" value="twoa" name="numbers" id="second"/>two A
<br/>
<div class="first divcont">First</div>
<div class="second divcont">second</div>
<div class="third divcont">third</div>
$(".second,.third").hide();
$('input[type="radio"]').on("change",function () {
var FVal = $('input[name="number"]:checked').val();
console.log(FVal);
if(FVal!='one'){
$(".divcont").hide();
$(".second").show();
}else{
$(".divcont").hide();
$(".first").show();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.