I'm trying to set up a series of radio buttons which will become unchecked after clicking another one, i.e. only one can be checked at a time. I also make a text area below the radio buttons appear or disappear based on which radio button has been selected. My html is
<table id="tableId">
<tbody>
<tr>
<td>
<div id="selectTitle">
Some Select
</div>
<select id="stuff">
<option value="0">option 0</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</td>
</tr>
<tr>
<td>
<div>
Radio Options
</div>
<ul>
<li>
<input id="rad1" type="radio" /> rad1 </li>
<li>
<input id="rad2" type="radio" /> rad2 </li>
<li>
<input id="rad2" type="radio" /> rad3 </li>
</ul>
</td>
</tr>
<tr>
<td>
<input id="textArea" type="textarea" />
</td>
</tr>
</tbody>
</table>
and my javascript is
$("#rad1").click(function() {
$("#rad2").prop("checked", false);
$("#rad3").prop("checked", false);
$("#textArea").hide();
});
$("#rad2").click(function() {
$("#rad1").prop("checked", false);
$("#rad3").prop("checked", false);
$("#textArea").hide();
});
$("#rad3").click(function() {
$("#rad1").prop("checked", false);
$("#rad2").prop("checked", false);
$("#textArea").show();
});
Here's the problem:
rad1 and rad2 work correctly. When you click on them, the buttons toggle from being checked to unchecked as expected. However, when you click rad3, it stays checked, and won't become unchecked until you refresh the page. I looked through the cases, and nothing seems to be different between them. Here's a jsfiddle with my code. Any help is appreciated!
If you give your radio inputs same name, they would work as you uexpect:
<ul>
<li><input id="rad1" name="rad" type="radio" /> rad1 </li>
<li><input id="rad2" name="rad" type="radio" /> rad2 </li>
<li><input id="rad3" name="rad" type="radio" /> rad3 </li>
</ul>
If you want to group radio buttons they all need to have the exact same name attribute. Then you get the behaviour by default. From there you can apply a single change event handler to toggle the #textarea element based on the selected value.
Also note that you duplicated the rad2 id, which is invalid, and also radio inputs require a value attribute. Try this:
$('input[name="foo"]').change(function() {
$('#textArea').toggle(this.value == '3');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><input id="rad1" type="radio" value="1" name="foo" />rad1</li>
<li><input id="rad2" type="radio" value="2" name="foo" />rad2</li>
<li><input id="rad3" type="radio" value="3" name="foo" checked="true" />rad3</li>
</ul>
<input id="textArea" type="textarea" />
You must put thename property to all your radios in a group.
The name should be the same in your 3 radios.
like:
<input type="radio" name="radio" value="Val 1">
<input type="radio" name="radio" value="Val 2">
Line 26 in your HTML has an issue, you have duplicated the ID for type rad3.
Changed the id to rad3 and seems to be working as expected.
Related
I would like to validate the below code in js so that the user has to check one but i do not know how to. The form name is 'registration'
<li>
<input type="checkbox" name="en" value="en" />
<span>English</span>
</li>
<li>
<input type="checkbox" name="nonen" value="noen" />
<span>Non English</span>
</li>
Use an input of type radio instead.
Here is a link to the MDN documentation, basically all inputs of type radio that have the same name property are grouped together and the user can select only one of them.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
You could try this one
<input type="radio" name="raden" id="english" checked>
<label for="english">English</label>
<input type="radio" name="radnon" id="nonenglish">
<label for="nonenglish">Non-English</label>
<li><input type="checkbox" name="en" value="en" /><span>English</span></li>
<li><input type="checkbox" name="en" value="en" /><span>Non English</span></li>
In check box name must be same if all check boxes are selected. Try thid code.
<li>
<input type="radio" name="nonen" value="en" checked/>
<span>English</span>
</li>
<li>
<input type="radio" name="nonen" value="noen"/>
<span>Non English</span>
<li>
<input type="radio" name="nonen" value="en" checked/>
<span>English</span>
</li>
<li>
<input type="radio" name="nonen" value="noen"/>
<span>Non English</span>
This is my html:
<input id="source" type="radio" name="source" value="1" />
<input id="source" type="radio" name="source" value="2" checked="" />
<table id="dataList">
<tr row='12'><td>this is row 12</td></tr>
<tr row='13'>
<td>
<input id="item" type="radio" name="item" value="1" />
<input id="item" type="radio" name="item" value="2" />
</td>
</tr>
<tr row='14'><td>this is row 14</td></tr>
</table>
any my jquery:
jQuery(document).ready(function() {
jQuery('input[name=source]').click( function() {
if(jQuery('input[value=1]').is(':checked')) {
jQuery('#dataList tr[row=13]').show();
} else if(jQuery('input[value=2]').is(':checked')) {
jQuery('#dataList tr[row=13]').hide();
}
})
})
Supposedly when the page loaded, the tr row='13' will be hide if the radio button id=source with value=2 is checked. but it not happen as expected. Please help me.
You can try
$('tr[row="13"]').hide();
right after ng jQuery(document).ready(function() { since you said 'when the page loaded'.
You could change your target. I don't know what its called but this thing $('TARGET').Since you have 2 inputs that has a value of 1.
See the following,
<input id="source" type="radio" name="source" value="1" />
and
<input id="item" type="radio" name="item" value="1" />.
It may cause overwriting of commands.
I'm having a select control which should be hidden when the form loads. I'm having a parent checkbox and a group of child checkboxes. What I want to achieve is unless the parent checkbox or at least one(or more than one) of the checkbox from the child checkboxes is checked the Select control should not be shown, it should be kept hidden. If the parent checkbox or any one(or more than one) checkbox among the child checkboxes is checked the select control should be shown. One more condition to display the select control is the field with id site_id should contain the value XYZ only. If it has some different value then the select control should not be displayed even after selection of parent checkbox or any one or more than one checkboxes from child checkboxes. My code snippet is as follows:
<!--The code below is for parent checkbox-->
<input type="hidden" value="XYZ" id="site_id" name="site _id">
<p class="custom-form">
<input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
<a class="drop" href="#">more</a>
</p>
<!--Parent checkbox code ends here-->
<!--The code below is for select control-->
<select name="select_option">
<option value="0">--Select Action--</option>
<option value="1" class="delete_user" href="#deletePopContent">Delete User</option>
<option value="2" class="disable_user" href="#disablePopContent">Disable User</option>
<option value="3" class="update_user" href="#updatePopContent">Update Class and Section</option>
<option value="4" class="default_user" href="#defaultPopContent">Change Password</option>
</select>
<!--Select code ends here-->
<!--The code below is for child checkboxes-->
<input class="custom-check" type="checkbox" name="item[]" id="" value="d3c1ac9ac08da86e73258a11a43251af">
<input class="custom-check" type="checkbox" name="item[]" id="" value="b993166c4795b3bfe96640e55e8dcbbc">
<input class="custom-check" type="checkbox" name="item[]" id="" value="77d4721ada7677feda77a250c7cee1c4">
<input class="custom-check" type="checkbox" name="item[]" id="" value="68d6e7a8c09c77c5fec49945beaea4f8">
<input class="custom-check" type="checkbox" name="item[]" id="" value="85634bc9cdbcb6b39eaf4946b99db5de">
<input class="custom-check" type="checkbox" name="item[]" id="" value="bb1a20794d65966b950c5933100496ce">
<input class="custom-check" type="checkbox" name="item[]" id="" value="59ee376a9d126a26b350fff3110ea825">
<input class="custom-check" type="checkbox" name="item[]" id="" value="428895b1ae5f3226345e6c6f256c7c85">
<!--In the same manner other child checkboxes will come-->
<!--Child checkboxes code ends here-->
Can you help me in this regard, please? Thanks in advance.
The jQuery code for checking all checkboxes upon checking the parent checkbox is as folows:
$("#ckbCheckAll").click(function () {
$(".ez-checkbox input").toggleClass("ez-checked", this.checked);
if ($(this).is(':not(:checked)'))
$(".ez-checkbox input").removeAttr('checked');
if($(this).is(':checked'))
$(".ez-checkbox input").attr('checked','checked');
$(".ez-checkbox input").closest("div").toggleClass("ez-checked", this.checked);;
});
I hope this helps... I've modified your HTML to include a div around the child checkboxes, as well as an ID field for the hidden select box:
<!--The code below is for parent checkbox-->
<input type="hidden" value="XYZ" id="site_id" name="site _id">
<p class="custom-form">
<input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
<a class="drop" href="#">more</a>
</p>
<!--Parent checkbox code ends here-->
<!--The code below is for select control-->
<select name="select_option" id="hiddenSelect">
<option value="0">--Select Action--</option>
<option value="1" class="delete_user" href="#deletePopContent">Delete User</option>
<option value="2" class="disable_user" href="#disablePopContent">Disable User</option>
<option value="3" class="update_user" href="#updatePopContent">Update Class and Section</option>
<option value="4" class="default_user" href="#defaultPopContent">Change Password</option>
</select>
<!--Select code ends here-->
<!--The code below is for child checkboxes-->
<div id="childBoxes">
<input class="custom-check" type="checkbox" name="item[]" id="" value="d3c1ac9ac08da86e73258a11a43251af"/>
<input class="custom-check" type="checkbox" name="item[]" id="Checkbox1" value="b993166c4795b3bfe96640e55e8dcbbc"/>
<input class="custom-check" type="checkbox" name="item[]" id="Checkbox2" value="77d4721ada7677feda77a250c7cee1c4"/>
<input class="custom-check" type="checkbox" name="item[]" id="Checkbox3" value="68d6e7a8c09c77c5fec49945beaea4f8"/>
<input class="custom-check" type="checkbox" name="item[]" id="Checkbox4" value="85634bc9cdbcb6b39eaf4946b99db5de"/>
<input class="custom-check" type="checkbox" name="item[]" id="Checkbox5" value="bb1a20794d65966b950c5933100496ce"/>
<input class="custom-check" type="checkbox" name="item[]" id="Checkbox6" value="59ee376a9d126a26b350fff3110ea825"/>
<input class="custom-check" type="checkbox" name="item[]" id="Checkbox7" value="428895b1ae5f3226345e6c6f256c7c85"/>
<!--In the same manner other child checkboxes will come-->
</div>
<!--Child checkboxes code ends here-->
Your javascript above wasn't clear to me, in that it seems to be trying to toggle checkbox displays, but is otherwise unrelated to your question. However, here's a solution to the problem you stated:
<script>
$('#hiddenSelect').hide();
if ($('#site_id').val() == "XYZ") {
$("#ckbCheckAll").click(function () {
displaySelect();
});
$('#childBoxes :input').click(function () {
displaySelect();
});
function displaySelect() {
var childChecked = $('#childBoxes').find('input[type=checkbox]:checked');
var parentChecked = $('#ckbCheckAll').is(':checked');
if (childChecked.length > 0 || parentChecked) {
$('#hiddenSelect').show();
} else {
$('#hiddenSelect').hide();
}
}
}
</script>
EDIT: After reading the title of your question, you can use $('#hiddenSelect').fadeIn('400') or $('#hiddenSelect').fadeOut('400') instead of .show and .hide, to the same effect.
I have been fumbling around with this problem for an hour now and I can't figure out why this strange behaviour in Radiobuttons occurs. The following is my code:
<label>Language
<input type="radio" id="de" value="de" onclick="switchRadioButtons(this);" >de
<input type="radio" id="en" value="en" onclick="switchRadioButtons(this);" >en
<input type="radio" id="other" value="other" onclick="switchRadioButtons(this);" >other
<input type="text" id="language" value="" /><br />
</label>
<script>
function switchRadioButtons(element) {
console.log(element.value);
</script>
So, in my opinion, whenever I click on either the value or the button itself, the value of the radiobutton should be written to the console. This works correctly for the button itself, but if I click on the label/description besides the button, it will always print "de" (the first item), no matter what I did (I also tried "switchRadioButtons(document.getElementById('other'));" with no effect).
Can anyone explain to my why this happens and maybe provide a solution?
You have all of your inputs inside the same label! If you click on it, it's gonna trigger the 1st element ('de'). It doesn't know that you wanted to trigger one of the other ones.
You need to have a separate label for each element.
add a group to your input
remove label enclosing inputs
autoclose input tags xHTML thingy...
Voilà it works :
http://jsfiddle.net/techunter/Z3fU7/
HTML
<label for="de">Deutch</label>
<input type="radio" name="lang" id="de" value="de" onclick="switchRadioButtons(this);" />
<label for="en">English</label>
<input type="radio" name="lang" id="en" value="en" onclick="switchRadioButtons(this);" />
<label for="other">Other</label>
<input type="radio" name="lang" id="other" value="other" onclick="switchRadioButtons(this);" />
<input type="text" id="language" value="" />
JS
function switchRadioButtons(element) {
console.log(element.value);
}
i have a small form. I want enable submit button when all the all the radio button is selected.
below is my code html
<form action="#" id="form1" method="post">
<ul>
<li>
<h3>Here’s what I want:<strong class="result1"></strong></h3>
<div>
<span><input type="radio" value="Cash Back rewards" name="want" id="01" /><label for="01">Cash Back rewards</label></span>
<span><input type="radio" value="Travel rewards" name="want" id="02" /><label for="02">Travel rewards</label></span>
<span><input type="radio" value="Gas rewards" name="want" id="03" /><label for="03">Gas rewards</label></span>
<span><input type="radio" value="Shopping rewards" name="want" id="04" /><label for="04">Shopping rewards</label></span>
</div>
</li>
<li>
<h3>Here’s my credit story: <strong class="result2"></strong></h3>
<div>
<span><input type="radio" value="I’m new to credit" name="story" id="05" /><label for="05">I’m new to credit</label></span>
<span><input type="radio" value="I pay my bills on time" name="story" id="06" /><label for="06">I pay my bills on time</label></span>
<span><input type="radio" value="I’ve had credit issues in the past" name="07" id="issues" /><label id="07">I’ve had credit issues in the past</label></span>
</div>
</li>
<li>
<h3>Here’s what I carry:</h3>
<span><input type="radio" value="I have a credit card with a good record" name="carry" id="08" /><label for="08">I have a credit card with a good record</label></span>
<span><input type="radio" value="I don’t have a credit card with a good record" name="carry" id="09" /><label for="09">I don’t have a credit card with a good record</label></span>
</li>
</ul>
<input type="submit" value="" name="" class="find" />
</form>
i am weak in javascript please advise me.
one more thing if li is not fix it will generate dynamically, so what i will have to do. basically every li is one quetion and radio button is option. so the question will be generate dynamically it can be any no. its not fix
Something like this would do the trick:
$('#form1 :radio').click(function() {
var disabled = $('#form1 li').filter(function() { return $(':radio:checked', this).length == 0; }).length > 0;
$('#form1 .find').prop('disabled', disabled);
});
This assumes your submit button is disabled as the page loads, since the disabled state only changes when an option is checked. You could of course do the same check during DOMReady (in which case I'd extract the listener function), but I'd prefer setting the markup manually during load.
Demo
The disabled variable is set by selecting all li elements in the form, reducing it to only the ones that meet the filter criteria "containing no checked radiobuttons", and checking whether there are any elements in the reduced collection.
If you're using a jQuery version less than 1.6, use .attr instead of .prop to set the disabled state.