I'm generating check-boxes based on suggestions in a table which has 30 rows per page. A row can have 0 suggestions or it could potentially have a 100. I want to use jQuery to only allow a user to select one check-box. If they select one and then change their mind the original check-box is unchecked and the new one become checked.
What you're looking for are radio inputs.
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
Make sure that one group of radio inputs has the same name!
Giving them different names means you will be able to select multiple radio inputs:
<label><input type="radio" name="testRadio1" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio2" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio3" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio4" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio5" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio6" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio7" value="Test"/>Test</label>
Which is undesirable.
If you really want checkboxes, use the following CSS:
input[type="radio"] {
-webkit-appearance: checkbox; /* Chrome, Safari, Opera */
-moz-appearance: checkbox; /* Firefox */
-ms-appearance: checkbox; /* not currently supported */
}
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label><br/>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
<label><input type="radio" name="testRadio" value="Test"/>Test</label>
I agree with the suggestion above, but in case you don't feel like doing so you can achieve the same with the following code;
<script>
$("input[type=checkbox]").click(function() {
$( "input[type=checkbox]" ).prop( "checked", false );
$(this).prop("checked", true);
});
</script>
Working JSFiddle http://jsfiddle.net/9kxoc2g6/1/
Related
I'm using Jquery to store the value of a checked set of radio buttons into a variable and it works fine, but the issue I'm having is when someone decides to skip the question (skip the set of radio buttons -i.e. don't select an option) the value that is returned in the variable is 'undefined'. I would like to have the value returned as blank (no value) if someone decides to skip a set of radio buttons. Is there an easy method to do this in Jquery?
Jquery:
`var raq1= $('input[type=radio][name=q1]:checked').val();`
HTML:
`<input type="radio" name="q1" id="qn1i5" value="5">
<input type="radio" name="q1" id="qn1i4" value="4">
<input type="radio" name="q1" id="qn1i3" value="3">
<input type="radio" name="q1" id="qn1i2" value="2">
<input type="radio" name="q1" id="qn1i1" value="1">`
What you want to do is check whether $('input[type=radio][name=q1]:checked').val() exists. If it exists, set that value to raq1. If it doesn't, you simply set raq1 to be an empty string.
This can be done with the following ternary:
$('input[type=radio][name=q1]:checked').val() ? $('input[type=radio][name=q1]:checked').val() : ''
And can be seen in the following:
document.getElementsByTagName('button')[0].addEventListener("click", function() {
var raq1 = $('input[type=radio][name=q1]:checked').val() ? $('input[type=radio][name=q1]:checked').val() : '';
console.log(raq1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="q1" id="qn1i5" value="5">
<input type="radio" name="q1" id="qn1i4" value="4">
<input type="radio" name="q1" id="qn1i3" value="3">
<input type="radio" name="q1" id="qn1i2" value="2">
<input type="radio" name="q1" id="qn1i1" value="1">
<button>Get Values</button>
Hope this helps!
I have a form where I have two groups of radio buttons, names are different but values are shared, so I need to select a radio from the first group, once it's selected the radio from the second group and same value can not be selected, i. e. it becomes disabled...
<table>
<tr><th>Origin language</th><th>Target language</th></tr>
<tr><td>
<label><input type="radio" name="lang_or" value="de">German</label>
<label><input type="radio" name="lang_or" value="en">English</label>
<label><input type="radio" name="lang_or" value="ca">Catalan</label>
<label><input type="radio" name="lang_or" value="es">Spanish</label>
<label><input type="radio" name="lang_or" value="fr">French</label>
<label><input type="radio" name="lang_or" value="it">Italian</label>
<label><input type="radio" name="lang_or" value="pt">Portugues</label>
</td><td>
<label><input type="radio" name="lang_tg" value="de">German</label>
<label><input type="radio" name="lang_tg" value="en">English</label>
<label><input type="radio" name="lang_tg" value="ca">Catalan</label>
<label><input type="radio" name="lang_tg" value="es">Spanish</label>
<label><input type="radio" name="lang_tg" value="fr">French</label>
<label><input type="radio" name="lang_tg" value="it">Italian</label>
<label><input type="radio" name="lang_tg" value="pt">Portugues</label>
</td></tr>
</table>
import jQuery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<script>
$( document ).ready(function() {
$('input[name=lang_or]').click(function(){
$('input[name=lang_tg]').prop("disabled",false);
$('input[name=lang_tg][value='+this.value).prop("disabled", "disabled");
});
});
</script>
I have three different named checkboxes like this
<label><input type="radio" name="selling" value="1" />Parduodu</label><br>
<label><input type="radio" name="trade" value="1" />Keičiu</label><br>
<label><input type="radio" name="gift" value="1" />Dovanoju</label>
How can I make that person could choose only one out of three ? It's important that the names of the radio's should be different
You should be declaring it as follows:
<label><input type="radio" name="type" value="selling" />Parduodu</label><br>
<label><input type="radio" name="type" value="trade" />Keičiu</label><br>
<label><input type="radio" name="type" value="gift" />Dovanoju</label>
Then examine $_POST['type'] for the value.
Based on this answer by D.A.V.O.O.D, you can use jQuery for this. Just add a class (for example "abc") to your checkboxes like:
<label><input type="radio" name="selling" value="1" class="abc" />Parduodu</label><br>
<label><input type="radio" name="trade" value="1" class="abc" />Keičiu</label><br>
<label><input type="radio" name="gift" value="1" class="abc" />Dovanoju</label>
and use the following jQuery:
$(".abc").each(function()
{
$(this).change(function()
{
$(".abc").prop('checked',false);
$(this).prop('checked',true);
});
});
n my html page I have got two sections, each independent of the other. When I am selecting Check1 and then check2 the choice2 gets unselected and only choice 4 gets selected. I want both choice 2 and choice 4 to be selected.
HTML
<div id="radio-gp1">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Choice 2</label>
</div>
<div id="radio-gp2">
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
<input type="radio" id="radio4" name="radio" /><label for="radio4">Choice 4</label>
</div>
<button id="check1">Check1</button>
<button id="check2">Check2</button>
JS
$(function() {
$( "#radio-gp1" ).buttonset();
$( "#radio-gp2" ).buttonset();
$('#check1').click(function() {
$('#radio-gp1 input').each(function(){
$(this).attr('checked','checked');
$( "#radio-gp1" ).buttonset('refresh');
});
});
$('#check2').click(function() {
$('#radio-gp2 input').each(function(){
$(this).attr('checked','checked');
$( "#radio-gp2" ).buttonset('refresh');
});
});
});
Not sure where I am going wrong, here's my fiddle http://jsfiddle.net/surysharma/waodj7n5/
You can't select multiple of radios that have the same name attribute. You'll want to name your groups separately.
JSFiddle
<div id="radio-gp1">
<input type="radio" id="radio1" name="radiogp1" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radiogp1"/><label for="radio2">Choice 2</label>
</div>
<div id="radio-gp2">
<input type="radio" id="radio3" name="radiogp2" /><label for="radio3">Choice 3</label>
<input type="radio" id="radio4" name="radiogp2" /><label for="radio4">Choice 4</label>
</div>
I have 10 radio buttons with unique name and these radio buttons are divided into two div. I mean each div have 5 radio buttons and i want to show only one div at a time with first radio button checked. what i want is visible div should have first radio button checked by default. but please note all radio buttons have unique name on a same page.
Below is my code for reference.
<style>
#secondopt, #firstopt { display: none;}
</style>
<script>
function checkme(){
if (document.getElementById("opt1").checked == true){
document.getElementById("firstopt").style.display = "block"
document.getElementById("secondopt").style.display = "none";
}
if (document.getElementById("opt2").checked == true){
document.getElementById("firstopt").style.display = "none"
document.getElementById("secondopt").style.display = "block";
}
}
</script>
<form name="form1">
<label><input type="radio" name="opt" id="opt1" onclick="checkme()" /> First opt</label>
<label><input type="radio" name="opt" id="opt2" onclick="checkme()" /> Second Opt</label>
<div id="firstopt">
<label><input type="radio" name="items" value="data1" />Item 1</label>
<label><input type="radio" name="items" value="data2" />Item 2</label>
<label><input type="radio" name="items" value="data3" />Item 3</label>
<label><input type="radio" name="items" value="data4"/>Item 4</label>
<label><input type="radio" name="items" value="data5"/>Item 5</label>
</div>
<div id="secondopt">
<label><input type="radio" name="items" value="data6"/>Item 6</label>
<label><input type="radio" name="items" value="data7"/>Item 7</label>
<label><input type="radio" name="items" value="data8"/>Item 8</label>
<label><input type="radio" name="items" value="data9"/>Item 9</label>
<label><input type="radio" name="items" value="data10"/>Item 10</label>
</div>
</form>
How to achive this?
As you have divided radio buttons in two div, you should also use group property/name of radio
buttons. Here give two different groups names and then use selected/checked property using radio button id.
do this
<form name=frmone>
<INPUT TYPE="Radio" Name="payment" Value="CC">Credit Card
<INPUT TYPE="Radio" Name="payment" Value="DC">Debit Card
<INPUT TYPE="Radio" Name="payment" Value="PP">PayPal
</form>
<script>
var len = document.frmOne.payment.length;
for (i = 0; i < len; i++) {
document.frmOne.payment[i].checked ;
break;
}
</script>