Geek Answers Handbook

Press the switch, then click the submit button

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

I created this DEMO from codepen.io

In this demo, you see six switches. (for example :) The first switch for the tree is for xx, and the second is for yy.

I made a submit button for two parts. When you change one of the three switches in the first part, then the first submit button is automatically displayed: block; but at the same time, the submit button for the second part, display:block;I do not want this.

I want to do it when the first part of the radio button is pressed, and then the send button of the first part display:block;also think the same for the second part.

How can I make it possible for someone to 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 the submit button the second part is not displayed: block; by pressing the right button.

+4
source share
4 answers

Not quite 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 receive a radio station with a click, and then uses it as a reference point. It uses closestwhich allows you to find the parent container, and then the findsbutton that you want inside only this container.

+2
source

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"/>
+5

parent() :

JS

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

DEMO

+1
source

You can find closest('.container')how

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

Check JSFIDDLE Link here

0
source

More articles:


All Articles