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

【问题标题】：Click radio button then show submit button单击单选按钮，然后显示提交按钮
【发布时间】：2015-03-02 19:50:29
【问题描述】：

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

我从 codepen.io

创建了这个 DEMO

在这个演示中，您可以看到有一个六个单选按钮。（例如：）第一个树单选按钮用于 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();
        });
    });

注意：我知道我是否更改了第二部分提交按钮的类名不是显示：块；单击第一部分单选按钮时。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

Checkbout 这个答案应该可以帮助你.. 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"/>

【讨论】：

【解决方案2】：

不完全确定您需要什么，但也许这会为您指明正确的方向：

$(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，你只需要在那个容器中找到你想要的按钮。

【讨论】：

感谢您的回答，这是我想做的。我可以这样取消吗？请点击此DEMO
不用担心。您可以将第一个类添加到您的“取消”按钮，以便它们显示\隐藏为一对，如果这就是您的意思。
所以你添加你的答案$('.first').hide(); 如果用户点击.cancel 按钮然后关闭提交按钮，我想这样做。我已经添加了一个取消类。请点击：DEMO
非常感谢您干净而有帮助的回答。

【解决方案3】：

使用 parents() 也可以做到：

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

DEMO

【讨论】：

这和@davy一样的答案
@innovation 他用的是 .closest() 但我用的是 .parents()
抱歉，我现在注意到了。
@innovation 仅供参考“.parent() 基本上只是 DOM 调用 .parentNode 的包装器。它非常快速高效，因为它本质上是对内置浏览器的一次调用”。跨度>
@innovation 不提ji

【解决方案4】：

请给closest('.container')点赞

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

JSFIDDLE Link check here

【讨论】：