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
Related
How can I find which radio button is selected after a precise div?
This is an Example:
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
Here, when I click on the class .delete I would like to check (with jQuery) if one of the radio button below (inside the fieldset) has been selected. Do you have any hints?
Thanks in advance.
If there is just bunch of radio button you would like to check are checked or not you can do something like this
$(document).ready(function(){
$('.delete').on('click', function(){
$(document).find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
Ofc in line 3 you can specify more about the radio button location. For exp $(document).find('.largelines input[type=radio]') "OR" if you need to find radio butons based on delete button you can modify the code like this:
$(document).ready(function(){
$('.delete').on('click', function(){
var $parent = $(this).parents('.largelines');
$parent.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
There is bunch of other ways to do that, another one is using next() or siblings() function:
$(document).ready(function(){
$('.delete').on('click', function(){
var $fieldset= $(this).next('fieldset');
//var $fieldset= $(this).siblings('fieldset');// i comment this out [its alternative way]
$fieldset.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
This find only checked radio under .largelines scope of clicked .delete element.
$(function () {
$(document).on('click', '.delete', function () {
var isChecked = $('input:radio:checked', $(this).parent()).length > 0
alert(isChecked)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
Check 1
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
<hr>
<div class="largelines">
<p class="line">OPTION 2</p>
<div class="delete">
Check 2
</div>
<fieldset>
<input type="radio" id="option21" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option22" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
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);
});
});
});
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>
I would like to disable all form elements in a div and show a RED message inside a new div if I click a radio button outside the div.
For example:
<div id="myform">
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
</div>
<div id="message">
Red Message here
</div>
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
I want when someone clicks one of the two radio buttons to disable all elements in the above form (myform) and display a red message in div message.
Thanks
Try this
$("input:radio").click(function(){
$("#myform input").attr("disabled", true);
$("#message").show();
});
$('input[name="sex"]').click(function(){
$('#myform input').prop('disabled',true);
$('#message').show();
});
#message { display:none; color:red }
$('#reset').click(function(){
$('#myform input').prop('disabled',false);
$('#message').hide();
});
http://jsfiddle.net/2zr4J/1/
$('input[name="sex"]').click(function(){
$('#myform input').prop('disabled',true);
$('#message').fadeIn();
});
$('#reset').click(function(){
$('#myform input').removeProp('disabled');
$('#message').fadeOut();
});
Working demo: http://jsfiddle.net/AlienWebguy/2zr4J/2/