单击单选按钮，然后显示提交按钮

Question

我正在尝试使用单选按钮进行单击以显示提交按钮。但我有一个问题..

我创造了这个DEMO从codepen.io

在本演示中，你可以看到有六个单选按钮。 （例如：）第一个树单选按钮用于xx，第二个树单选按钮用于yy。

我做了两个部分的提交按钮。当你改变第一部分中的三个单选按钮中的任何一个时，第一个提交按钮会自动显示：block;但同时第二部分提交按钮是display:block;我不想要它。

我想使第一部分单选按钮点击时，第一部分提交按钮display:block;也同样认为第二部分。

我该怎么做，任何人都可以在这方面帮助我？

HTML

<div class="container"> 

    <div class="radio_wrp"> 
    <input type="radio" name="x" class="yesno rdbtn"/>Yes 
    <input type="radio" name="x" class="yesno rdbtn"/>No 
    <input type="radio" name="x" class="yesno rdbtn" checked/>Maybe 
    </div> 
    <div class="submitbutton"><input type="submit" class="first"></div> 
</div> 
<div class="container"> 

    <div class="radio_wrp"> 
    <input type="radio" name="y" class="yesno rdbtn" checked/>Yes 
    <input type="radio" name="y" class="yesno rdbtn"/>No 
    <input type="radio" name="y" class="yesno rdbtn"/>Maybe 
    </div> 
    <div class="submitbutton"><input type="submit" class="first"></div> 
</div> 

CSS

.container { 
    width:500px; 
    margin:0px auto; 
    margin-top:50px; 
} 
.yesno { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    width: 30px; 
    height: 20px; 
    border-radius: 14px; 
    outline: 0; 
    background: #9da6b0; 
    -webkit-transition: all 0.15s ease-in-out; 
    cursor: pointer; 
} 
.yesno:after { 
    content: ""; 
    display: block; 
    width: 14px; 
    height: 14px; 
    background: #fff; 
    border-radius: 11px; 
    position: relative; 
    top: 3px; 
    left: 3px; 
    -webkit-transition: all 0.15s ease-in-out; 
} 
.yesno:checked { 
    background: #529ecc; 
} 
.yesno:checked:after { 
    left: 13px; 
} 
.radio_wrp { 
    float:left; 
    width:500px; 
    height:auto; 
} 
.submitbutton { 
    float:left; 
    width:50px; 
    height:50px; 
} 
.first {display:none;} 
.second{display:none;} 

的JavaScript

$(document).ready(function(){ 
     $('.rdbtn').click(function(){ 
      $('.first').show(); 
     }); 
    }); 

注：我知道如果我改变了第二部分的类名称提交按钮 不显示：块;当点击第一部分单选按钮时。

Answer 1

不清楚自己需要什么，但也许这将指向你在正确的方向：

$(document).ready(function(){ 
    $('.rdbtn').click(function(){ 
     $('.first').hide(); //if you want to hide one that is already shown 
     $(this).closest('.container').find('.first').show();   
    }); 
}); 

Demo

它使用$(this)来获取点击收音机，然后将其用作定位点。它使用closest，它可以找到父母container，然后finds只需要在该容器中的按钮。

Answer 2

请你可以找到closest('.container')像

$(document).ready(function(){ 
    $('.rdbtn').click(function(){ 
     $(this).closest('.container').find('.first').show() ; 
    }); 
}); 

JSFIDDLE Link check here

Answer 3

Checkbout this answer should help you .. http://jsfiddle.net/j08691/VFJGD/

<input type="radio" name="TermLease" value="No" onclick="TermLeaseMonths.disabled=true"/>No 
<input type="radio" name="TermLease" value="Yes" onclick="TermLeaseMonths.disabled=false"/>Yes | 
How many months:<input type="hidden" name="TermLeaseMonths" value="0" /> 
<input type="submit" name="TermLeaseMonths" id="TermLeaseMonths" size="1" disabled="disabled"/> 

Answer 4

随着使用父母（）也可以做到：

JS

$(document).ready(function(){ 
    $('.rdbtn').click(function(){ 
     $('.first').hide(); 
     $(this).parents('.container').find('.first').show(); 
    }); 
    }); 

DEMO