I need for certain textboxes to show up when a certain radio button is clicked on my form, otherwise the textboxes should remain hidden. Here's an example of what I have:
HTML:
Radio buttons:
<p>Show textboxes<input type="radio" name="radio1" value="Show" onClick="getResults()">Do nothing<input type="radio" name="radio1" value="Nothing"></p>
Textboxes:
<div class="text"><p>Textbox #1 <input type="text" name="text1" id="text1" maxlength="30"></p></div>
<div class="text"><p>Textbox #2 <input type="text" name="text2" id="text2" maxlength="30"></p></div>
jQuery:
$(document).ready(function() {
$(".text").hide()
function getResults() {
$(".text").show()
};
});
Fiddle
When I take out the .show() code, the textboxes stay hidden. I need to show them when a radio button with the onClick event gets selected. Any help would be much appreciated.
JSFIDDLE
Javascript
$(document).ready(function () {
$(".text").hide();
$("#r1").click(function () {
$(".text").show();
});
$("#r2").click(function () {
$(".text").hide();
});
});
Html
<p>Show textboxes
<input type="radio" name="radio1" id="r1" value="Show">Do nothing
<input type="radio" name="radio1" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
<p>Textbox #1
<input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>
<div class="text">
<p>Textbox #2
<input type="text" name="text2" id="text2" maxlength="30">
</p>
</div>
Instead of inline onclick() javascript, you can use .click():
$(document).ready(function () {
$(".text").hide();
$('input[type="radio"]').eq(0).click(function() {
$(".text").show()
});
});
Updated Fiddle
However, you should use .change() event for the input elements:
$(document).ready(function () {
$(".text").hide();
$('input[type="radio"]').eq(0).change(function() {
$(".text").show()
});
});
Updated Fiddle
You can use this code :
$(document).ready(function() {
$(".text").hide()
$('[name=radio1]').on('change', function(){
$('.text').toggle(this.value === 'Show');
})
});
Inline event are not recomanded, so bind a change event the the radio and if the value is Show, well show it!
http://jsfiddle.net/tT48f/3/
Currently you can pass the clicked object as this in form of parameter to getResults(), Where this refers to the current clicked object
See below
Script
$(document).ready(function() {
$(".text").hide()
});
function getResults(elem) {
elem.checked && elem.value == "Show" ? $(".text").show() : $(".text").hide();
};
HTML
<input type="radio" name="radio1" value="Show" onClick="getResults(this)">
Do nothing ^^^^
<input type="radio" name="radio1" value="Nothing" onclick="getResults(this)">
^^^^
Fiddle --> http://jsfiddle.net/tT48f/7/
Redefine a little bit your HTML markup and then you could only use CSS:
DEMO jsFiddle
input[value=Nothing]:checked ~ .text{
display: none;
}
Check this demo jsFiddle
jQuery
$(document).ready(function() {
$(".text").hide()
$('[name=radio1]').on('change', function(){
$('.text').toggle(this.value === 'Show');
})
});
Try like:
$(document).ready(function() {
$(".text").hide();
});
function getResults() {
$(".text").show();
};
1. $("input[name='Radio1']").change(function(){
if($(this).val()=="Ya") {
$("#QUESTION_1").fadeIn(250);
}
else {
$("#QUESTION_1").fadeOut(250);
} });
<div class="RdoClick">
<asp:RadioButton ID="RadioSugges" runat="server" GroupName="PopupRadio" Text=" C. Insert your suggestion:" />
</div>
<asp:TextBox ID="TextBox1" runat="server" class="PopupTxtBox" PlaceHolder="Enter your suggestion..."
onClick="check();" TabIndex="1" />
<script type="text/javascript">
function check() {
document.getElementById('<%=RadioSugges.ClientID%>').checked = true;
}
</script>
Related
Why is that when I put the checkboxes inside a label, It seems to stop working
This was my html code.
<label> <input type="radio" name="form-showhide" checked="checked" required value="call">Call </label>
<label> <input type="radio" name="form-showhide" value="email">Email </label>
and this is my jQuery code.
$("#lcall").live('click', function() {
$("#additional-info").show();
});
$("#lnk2").live('click', function() {
$("#lmail").hide();
});
This Is what I do and it works:
$(document).ready(function() {
$('.toggler').click(function() {
$('.toggle').toggle('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="toggler">Click Me</p> <p class="toggle">I will hide</p>
The toggle check box function is only working once and after the first instance it doesnt work. Any help?
Here is the jsfiddle:
http://jsfiddle.net/66gmK/
<script>
$(document).ready(function() {
$(document).on('click','#1',function(){
$("INPUT[type='checkbox']").each(function(){
var Checked = $(this).attr('checked');
$(this).attr('checked', !Checked);
});
});
});
</script>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<input name="checkbox" type="checkbox" id="1" value="0" />
<label for="1" >Toggle All</label>
</p>
<p>
<input name="checkbox" type="checkbox" id="2" value="0" />
ahmed</p>
<p>
<input name="3" type="checkbox" id="3" value="0" />
<label for="3">omar</label>
</p>
</form>
</body>
Move the Checked variable out of the each because the this context changes in the each, it refers to the checkbox in the loop, not the toggle checkbox. Remove the ! not operator when changing the checked property. Also use prop instead of attr for the checked property.
Demo
$(document).ready(function() {
$(document).on('click','#1',function(){
var Checked = $(this).prop('checked');
$("INPUT[type='checkbox']").each(function(){
$(this).prop('checked', Checked);
});
});
});
your jquery
on each function , you should not change the property of toggle checkbox.
$(document).ready(function() {
$(document).on('click','#1',function(){
$("INPUT[type='checkbox']").not(this).each(function(){
var Checked = $(this).prop('checked');
$(this).prop('checked', !Checked);
});
});
});
Demo
You can also use
$(document).ready(function() {
$('#1').on('click',function(){
var Checked = $(this).prop('checked');
$.each($("input[type='checkbox']"), function(i,e){
$(e).prop('checked', Checked);
});
});
});
Hi i am having two radio button plan a, plane b and i ant that when i click on plane a then check box android apps,web apps checked and texbox smart card enable and if i click plane b then all check box should be checked and all text box should be enable
<p class="contact">
<input type="radio" name="PlanA"id="PlanA"value="A"><label for="PlanA"><span style="font-weight:bold">PlanA</span></label><br>
<input name="PlanA" type="hidden" value=0 />
</p>
<p class="contact">
<input type="radio" name="PlanB"id="PlanB"value="B"><label for="PlanB"><span style="font-weight:bold">PlanB</span></label><br>
<input name="PlanB" type="hidden" value=0 />
</p>
<p class="contact">
<input type="checkbox" name="AndroidApps" id="smartphone" value=1><label for="AndroidApps"><span style="font-weight:bold">AndroidApps</span></label><br>
<input name="AndroidApps" type="hidden" value=0 />
</p>
<p class="contact">
<input type="checkbox" name="WebApps" id="mobweb" value=1><label for="WebApps"><span style="font-weight:bold">WebApps</span></label><br>
<input name="WebApps" type="hidden" value=0 />
</p>
<p class="contact"><label for="SmartCard"><span style="font-weight:bold">SmartCard</span></label>
<input type="text" name="SmartCard"id="scard"disabled="disabled" required size="45" >
</p>
<p class="contact"><label for="comment"><span style="font-weight:bold">EmailService</span></label>
<input type=email name="emailid"id="emailid"disabled="disabled" required size="45" >
</p>
<p class="contact"><label for="comment"><span style="font-weight:bold">SmsService</span></label>
<input type=tel name="mobnum"id="mobnum"disabled="disabled" required onKeyUp="isValidChar(this.value);" size="45">
</p>
i tried here
$(document).ready(function(){
$('#PlanA').on('change',function(e) {
console.log("dfsd");
$("#mobweb,#smartphone,#smartcard").prop("checked",this.checked);
$("#scard").prop("disabled", !$(this).is(':checked'));
});
});
$(document).ready(function(){
$('#PlanB').on('change',function(e) {
console.log("dfsd");
$("#mobweb,#smartphone,#smartcard,#email,#sms").prop("checked",this.checked);
$("#emailid").prop("disabled", !$(this).is(':checked'));
$("#mobnum").prop("disabled", !$(this).is(':checked'));
$("#scard").prop("disabled", !$(this).is(':checked'));
});
});
How Can i achieve this ?
Thanks in advance
The 'name' attribute of all the radio buttons in your case should be same but id can be different. All radios with same name are in a group called radio group. They will work as they want you to.
Try this:
$(document).ready(function(){
$('#PlanA').on('change',function(e) {
$('input:radio').not(this).attr('checked',false);
$("#mobweb,#smartphone,#smartcard").prop("checked",this.checked);
$("#emailid").prop("disabled", $(this).is(':checked'));
$("#mobnum").prop("disabled", $(this).is(':checked'));
$("#scard").prop("disabled", !$(this).is(':checked'));
});
$('#PlanB').on('change',function(e) {
$('input:radio').not(this).attr('checked',false); $("#mobweb,#smartphone,#smartcard,#email,#sms").prop("checked",this.checked);
$("#emailid").prop("disabled", !$(this).is(':checked'));
$("#mobnum").prop("disabled", !$(this).is(':checked'));
$("#scard").prop("disabled", !$(this).is(':checked'));
});
});
DEMO
Check JSFiddle for this below will help to see actually
jsfiddle.net/rohanppatil/TTknF/8/
First you have to group your radios with same name.
Try with this:
$(document).ready(function(){
$('.contact').on('change', ':radio', function(e) {
if(this.id === "PlanA"){
$("#mobweb,#smartphone,#smartcard").prop("checked", this.checked);
$("#scard").prop("disabled", !this.checked);
} else if(this.id === "PlanB"){
$(':checkebox').prop("checked", this.checked);
$('[type=text], [type=email], [type=tel]').prop("disabled", !this.checked);
}
});
});
Demo # Fiddle
I have this form http://jsfiddle.net/thiswolf/XDsSt/ with four identical inputs and buttons.The problem is,each section is updates its own unique data in the database so when updating,its important the submit button i click updates the database with the input from that section only.
My function is
$(document).ready(function() {
$(".xx").live('click', function(){
alert('clicked');
});
});
How do i make sure the button click is unique to that section?.
Use an ID value instead for each input button. This way, jQuery can identify it like so:
$('#button_tag');
HTML:
<html>
<head></head>
<body>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn1" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn2" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn3" type="submit" class="xx" value="Submit">
</section>
<section>
<input type="text" value="Town">
<input type="text" value="Mayor">
<input type="text" value="Highway">
<input id="btn4" type="submit" class="xx" value="Submit">
</section>
</body>
</html>
Javascript:
$(document).ready(function () {
$(".xx").live('click', function () {
alert('clicked ' + $(this).attr('id'));
});
});
JsFiddle:
http://jsfiddle.net/XDsSt/7/
Get the corresponding section that button belongs to . Then access the elements inside that. You may use the jQuery closest()/parent()(if only one layer of hierarchy of controls) function for that.
$(document).ready(function() {
$(".xx").live('click', function(e){
e.preventDefault(); //if you want to prevent normal form submit
var item=$(this);
var sectionClicked=item.closest("section");
//Let's alert the first text box
alert(sectionClicked.find("input").first().val());
//do whatever with the items belongs the current section
});
});
Sample : http://jsfiddle.net/XDsSt/8/
I recommend you to switch to jQuery on instead of live as it is deprecated.
$(document).ready(function() {
$(".xx").live('click', function() {
$('section').has(this).find(':input:text').each(function() {
alert( this.value ) ;
});
});
});
Demo
If possible then instead of .live(), use .on() with jQUery 1.7+, because live() is deprecated.
$(document).ready(function() {
$("body").on('click', '.xx', function() {
$('section').has(this).find(':input:text').each(function() {
alert( this.value ) ;
});
});
});
Demo
if id is not an option - I don't understand that , but you can put multiple classes in buttons
<input type="button" class="xx btn1" ... >
$(document).ready(function() {
$(".xx").live('click', function(){ // look into on instead on live
if $(this).hasclass('btn1');{
alert('clicked');
}
});
});
After trying multiple examples on StackOverflow to fix my issue, I still can't figure out my problem.
I have 3 checkboxes:
<input id="pets_dog" class="text" type="checkbox" class="pets" name="pets[]" value="pets_dog"> Dogs</input>
<input id="pets_cats" class="text" type="checkbox" class="pets" name="pets[]" value="pets_cats"> Cats</input>
<input id="pets_none" class="text" type="checkbox" class="pets" name="pets[]" value="pets_no"> None</input>
And when "pets_none" is checked, I need the other 2 checkboxes to be unchecked and vice versa. Here is my current jQuery code:
$("#pets_none").change(function() {
if($("#pets_none").attr('checked')) {
$("#pets_cats").removeAttr('checked');
$("#pets_dogs").removeAttr('checked');
}
});
I can't figure out for the life of me why it's not working, and appreciate any help.
Your html should be
<input id="pets_dog" class="text pets" type="checkbox" name="pets[]" value="pets_dog" /> Dogs
<input id="pets_cats" class="text pets" type="checkbox" name="pets[]" value="pets_cats" /> Cats
<input id="pets_none" class="text pets" type="checkbox" name="pets[]" value="pets_no" /> None
JS
$(function(){
$("#pets_none").on('change', function(e) {
if($(this).is(':checked')) {
$("#pets_dog").attr('checked', false);
$("#pets_cats").attr('checked', false);
}
});
});
DEMO.
Update :
You have used class attribute twice, it should be as follows
<input id="pets_dog" type="checkbox" class="pets text" name="pets[]" value="pets_dog" /> Dogs
<input id="pets_cats" type="checkbox" class="pets text" name="pets[]" value="pets_cats" /> Cats
<input id="pets_none" type="checkbox" class="text pets" name="pets[]" value="pets_no" /> None
JS
$(function(){
$(".pets").on('change', function(e) {
var el=$(this);
if(el.is(':checked') && el.attr('id')=='pets_none') {
$(".pets").not(el).attr('checked', false);
}
else if(el.is(':checked') && el.attr('id')!='pets_none')
{
$("#pets_none").attr('checked', false);
}
});
});
DEMO.
You can use the prop method:
$("#pets_none").change(function() {
if (this.checked) {
$("#pets_cats, #pets_dog").prop('checked', false);
}
});
Use the .prop() method:
...
$("#pets_cats").prop('checked', false);
$("#pets_dogs").prop('checked', false);
...
And to check whether the #pets_none is checked, use that method too:
$("#pets_none").prop('checked');
var checked = $(this).find('Enable').text().toLowerCase();
$("#chk__Enable").each(function () {
if (checked == 'true') {
$(this).attr('checked', 'checked');
} else {
$(this).removeAttr('checked');
}
});