javascript - Click radio button then show submit button - Stack Overflow

admin管理员组

文章数量:1023056

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.

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.

• javascript
• jquery
• css

Share Improve this question Follow asked Mar 2, 2015 at 10:38 user4082764user4082764

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Checkbout this answer should help you.. http://jsfiddle/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"/>

Please can you find closest('.container') like

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

JSFIDDLE Link check here

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.

With using parents() also it can be done:

JS

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

DEMO

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.

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.

• javascript
• jquery
• css

Share Improve this question Follow asked Mar 2, 2015 at 10:38 user4082764user4082764

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Checkbout this answer should help you.. http://jsfiddle/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"/>

Please can you find closest('.container') like

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

JSFIDDLE Link check here

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.

With using parents() also it can be done:

JS

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

DEMO

本文标签： javascriptClick radio button then show submit buttonStack Overflow