Click radio button then show submit button


Tags: javascript,jquery,css

Problem :

I am trying to make a click to show submit button using radio button. But i have one question..

I have created this DEMO from codepen.io

In this demo you can see there is a six radio button. (for example:)The first tree radio button is for xx, and second tree radio button is for yy .

I made a submit button for the two parts.When you change any one of the three radio buttons in the first part then the first submit button is automatically display:block; but at the same time the second part submit button is display:block; i don't want to it.

I want to make when first part radio buttons clicked then first part submit button display:block; also same think for second part.

How can i do that anyone can help me in this regard ?

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

Note: I know if i change the class name for second part submit button is not display:block; when clicked first part radio buttons.



Solution :

Not exactly sure what you need but maybe this will point you in the right direction:

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

It uses $(this) to get the clicked radio, then uses it as an anchor point. It uses closest, which works up the way to find the parent container and then finds the button you want inside only that container.


    CSS Howto..

    How do I use CSS animations to slide a fixed position element from the bottom of the page to the top?

    Using CSS to style a Sencha Touch form - how do I find the elements?

    How important are HTML/CSS validation errors like s inside

    s? [duplicate]

    same button for show/hide in jquery

    How to trigger self hover on child element

    How to set width of DIV to span with text inside it (so not fixed)

    How do you make these div elements display correctly?

    html, how to make elements not shift when browser zooms?

    How to connect css to html in Google Apps Scripts

    How can I correctly center this div into its container? What is wrong?

    How to change the background color of the heading from transparent to paint white?

    Position relative, how to get rid of dead space?

    How to: Reduce font-size if a line breaks

    How to edit the CSS of CarrierWave's 'Choose file' button and “No file chosen” text? (Rails4)

    What to do to align text as shown in the image using HTML and CSS?

    how to stretch an image in background css property

    How to use not css selector with * in stylesheet

    How to center align ion icon inside button?

    How to center my images in my case?

    How do I get a link to ignore hover on mouseover?

    How to Clear Every Third Box in a Row? [duplicate]

    How to fire Javascript code to be the last, when all the HTML/CSS and Javascript Codes are fired?

    CSS: How would I select a specific Text and hide it

    Background image url is not showing the image

    How can I change the selection text background using CSS?

    How to make text wrap nicely below start of first line

    How to indent items of a sublist using css and html in wordpress

    How to make specific areas in a div clickable with css / js / anything

    How can I put three elements in the same column, with the first on top, second and third in the center of the remaining space, using Flexbox?

    On textbox focus, how can you change the background color of the element prior to it with only CSS?