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);
});
});
Related
I have the below html code
<fieldset id="a">
<input type="radio" name="choice1" value="1" radioatrr="0" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice2" value="2" radioatrr="0" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice3" value="3" radioatrr="0" class="myvalue3" /><label for="choice3">text 3</label>
</fieldset>
<fieldset id="b">
<input type="radio" name="cb-choice1" value="4" radioatrr="1" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="cb-choice2" value="5" radioatrr="1" class="myvalue5" /><label for="cb-choice2">text 5</label>
</fieldset>
I want if choice2 is checked and one of cb-choice1 or cb-choice2 then the received value is the value of cb-... choice (4 or 5) if choice2 is checked and no cb-... is checked then the received value is 2.
How can I do this?
I try this
$("input:checked").each(function(i) {
if (($(this).attr("radioatrr") == 0)) {
alert(($(this).attr("value"));
}
})
but can not working as I want
You can check out this tutorial from W3 to help you out:
https://www.w3schools.com/jsref/prop_radio_value.asp
In regards to your problem, you can hook in this function:
function handleRadioSelection() {
if(document.getElementByName('choice2').checked) {
if (document.getElementByName('cb-choice1').checked) {
return document.getElementByName('cb-choice1').value
} else if (document.getElementByName('cb-choice2').checked) {
return document.getElementByName('cb-choice2').value
} else {
return document.getElementByName('choice2').value
}
}
}
I'm using a hidden input field to capture the value that you want, you can change it to anything else. I've also modified the radio buttons into two groups, as from reading the question/requirements I think that's how it should be setup.
$("#submit").click(function() {
//capture group 1 and group 2 value that's checked
var val1 = $('input[name=choice]:checked').val();
var val2 = $('input[name=choice2]:checked').val();
//capture the input object with the desired value
var sendVal = $('input[name=myval]');
//reset value to 0 as this happens on click, incase value gets changed
sendVal.val(0);
//if group 1 is 2 and there is a value selected in group2
if(val1==2&&val2 != undefined){
sendVal.val(val2);
//if group 1 is 2 and group 2 is not selected
}else if(val1==2&&val2 == undefined){
sendVal.val(val1);
}
//showing value to be sent in an alert
alert(sendVal.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Group 1</h2>
<input type="radio" name="choice" value="1" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice" value="2" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice" value="3" class="myvalue3" /><label for="choice3">text 3</label>
<h2>Group 2</h2>
<input type="radio" name="choice2" value="4" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="choice2" value="5" class="myvalue5" /><label for="cb-choice2">text 5</label>
<input type="hidden"name="myval" value="0">
<br/>
<button id="submit">submit</button>
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'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/
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>