Develop Reference

radio input checked after click on input type text

i got simple form what contain radio input and text input.
My goal is: check radio input when click on text input
Thanks
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_option_4" name="group1"/>
</label>
</div>

You should have unique id for the input and radio then you can associate a click event in input by its id that will check radio input when click.
using jQuery
$('#gr_1_input_4').click(function(){
$('#gr_1_option_4').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>
using JavaScript
document.getElementById('gr_1_input_4').addEventListener('click', function(){
document.getElementById("gr_1_option_4").checked = true;
});
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>

You can have focus event handler for input text and inside it set checked property of the radio button.
NOTE: Don't use same id for multiple html elements as it will end up with javascript / jquery not working for id oriented code. You have used gr_1_option_4 as id for both radio and text input.
$(function(){
$("input[type=text][name=group1]").on("focus", function(){
$("input[type=radio][name=group1]").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_option_4" name="group1"/>
</label>
</div>

Firstly change your Element's Id , you cant have same ids among elements.
Secondly you can add an event handler like
document.getElementById("textId").onclick = function() {myFunction()};
and define that function like
function myFunction() {
document.getElementById("radioButtonID").checked = true;
}
EDIT: I FILL THE ANSWER AND SEE THAT ALREADY SOMEONE HAD ASNWERED but i keep my answer because is not Jquery like the other

One alternative way is using prev .
$('input[type="text"]').click(function(){
$(this).prev('input[type="radio"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox-wrapper">
<label for="gr_1_option_4">
<input type="radio" id="gr_1_option_4" name="group1" value="">
Sonstiges:
<input type="text" id="gr_1_input_4" name="group1"/>
</label>
</div>

JavaScript functions messing up my Radio Button displays

I created a form which contains two Radio Buttons.
Each radio button displays a separate form, when Clicked.
When a button is un-clicked, the form disappears from view (it is not shown)
I also added a second JavaScript Function, which disables the "SUBMIT" button, if none of the radio buttons are clicked.
The program works fine..........except I have the following problems :
(a) For some reason, I am able to click BOTH radio buttons! Radio-buttons should not allow for more than one selection. But, in my form, both radio buttons are clickable
(b) the second JS function is not working; disabling the SUBMIT button is easy. But...........when I click either of the radio buttons, the SUBMIT button does not enable.
Here is the first JS function (for "hiding" the forms under each radio buttons)
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#firstformContainer').toggle('show');
jQuery('#secondformContainer').hide();
}
if (c.value == "1") {
jQuery('#secondformContainer').toggle('show');
jQuery('#firstformContainer').hide();
}
};
</script>
And the second function, for disabling the SUBMIT button :
<script type="text/javascript">
function fCheck() {
document.my_form.submit.disabled
=!(document.my_form.formselector1.checked ||
document.my_form.formselector2.checked);
}
</script>
And here is the form :
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector"
id="formselector1" onClick="displayForm(this); fCheck()"></input>Input
Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname"
name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
<input value="2" type="radio" name="formselector"
id="formselector2" onClick="displayForm(this); fCheck()">
</input>Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname"
value="$surname">
</dd>
</form>
</div>
<br>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
What am I missing?
UPDATE
I have solved the RADIO BUTTON problem.
Now, I need to fix the second problem, with the JS function : fCheck ()
It is not working.
I have feeling it's because : I am not calling BOTH functions correctly in the ONCLICK.
<input value="1" type="radio" name="formselector" id="radio1"
onClick="displayForm(this); javascript:fCheck()"></input>
<input value="2" type="radio" name="formselector" id="radio2"
onClick="displayForm(this); javascript:fCheck()"></input>

You cannot nest forms. This makes the second radio button not inside the form and hence it allows you to select both at the same time. Rewrite your html like this
<form name="my_form" id="my_form">
<input value="1" type="radio" name="formselector" id="formselector1" onClick="displayForm(this); fCheck()"></input>
<input value="2" type="radio" name="formselector" id="formselector2" onClick="displayForm(this); fCheck()"></input>
<input type="submit" name="submit" value="REGISTER" disabled>
</form>
Input Firstname
<div style="display:none" id="firstformContainer">
<form id="firstform">
<input type="text" "16" id="firstname" name="firstname" value="$firstname">
</form>
</div>
<br>
<br>
Input Surname
<div style="display:none" id="secondformContainer">
<form id="secondform">
<input type="text" id="surname" name="surname" value="$surname">
</form>
</div>
<br>

how to select only one checkbox using jquery?

I am using checkbox in the asp.net gridview. I want select only one checkbox at time. if I select one checkbox other checkboxes should be deselected.
I have html view source
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl02_ctl02_ctl00_ChkID" type="checkbox"
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl03_ctl02_ctl00_ChkID" type="checkbox"

Usually radio buttons are used for the exclusive functionality where only one item in a group is selected and the browser will do taht for you automatically with the right HTML.
For checkboxes, you could code it with jQuery like this:
<div class="checkboxContainer">
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl02_ctl02_ctl00_ChkID" type="checkbox"> Item 1<br>
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl03_ctl02_ctl00_ChkID" type="checkbox"> Item 2<br>
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl04_ctl02_ctl00_ChkID" type="checkbox"> Item 3
</div>​
$("input[type='checkbox']").change(function() {
$(this).closest(".checkboxContainer").find("input[type='checkbox']").not(this).prop("checked", false);
$(this).prop("checked", true);
});
​
Working Demo: http://jsfiddle.net/jfriend00/hWEXx/
Here's the pure HTML way of doing exclusive radio buttons (also in that same demo):
<div class="radioGroup">
<input type="radio" name="group1">Item A<br>
<input type="radio" name="group1">Item B<br>
<input type="radio" name="group1">Item C<br>
</div>

Use a radio button instead of a checkbox.
<form>
<input type="radio" name="parents" value="Mom" /> Mom<br />
<input type="radio" name="parents" value="Dad" /> Dad
</form>

in asp.net you should use radiobuttons instead checkboxes (in this case)
<div class="group">
<asp:RadioButton Id="radio1" runat="server" GroupName="radioGroup" />
<asp:RadioButton Id="radio2" runat="server" GroupName="radioGroup" />
</div>
GroupName attribute make this functionality you need. (If radio1 is Checked the radio2 is automatically unchecked.
hope this help:)

radio button checked causes enabling of a textbox in asp.net

i have a 2 radio buttons that belong to the same group.
asp net radio buttons not regular input type radio buttons.
if the first radio button is selected, the textbox beside it will be enabled. else it will be disabled.
i have seen that for input type radio buttons using JQUERY. so far i wasnt able to adapt that code to my asp.net controls.
i need it 2 be javascript and not in code behind.
any advice?
thanks!
here is my code
<table>
<tr>
<td>
<asp:RadioButton ID="SiteLicenseRBN" runat="server" Checked="True"
GroupName="users" resourcekey="SiteLicenseRBN"
Text="Site License" TextAlign="Left" Font-Bold="True" />
</td>
<td>
<asp:RadioButton ID="ConcUsersRBN" runat="server" GroupName="users"
Text="Conc. Users" TextAlign="Left"
resourcekey="ConcUsersRBN" Font-Bold="True"
/>
<asp:TextBox ID="nuserstbx" runat="server" Enabled="False"
Width="71px"></asp:TextBox>
</td>
</tr>
</table>
if the 2nd radio button is selected(Conc. Users), then nuserstbx must be enabled, else it should be disabled.

Something like this:
<form name="myform">
<input type="radio" name="radios" onclick="rtest(this)" value="R1"/>
<input type="text" disabled="disabled" name="t1"/>
<input type="radio" name="radios" onclick="rtest(this)" value="R2"/>
<input type="text" disabled="disabled" name="t2"/>
<input type="radio" name="radios" onclick="rtest(this)" value="R3"/>
<input type="text" disabled="disabled" name="t3"/>
</form>
<script>
function rtest(r){
var allinputs = document.myform.elements;
for(var i=0; i < allinputs.length; i += 1 ){
if ( allinputs[i].type === "text" ){
if ( allinputs[i].previousElementSibling.checked ){
allinputs[i].removeAttribute("disabled");
}else{
allinputs[i].disabled = "disabled";
}
}
}
}
</script>
http://jsfiddle.net/HjLeH/

This a quick basic example. All textboxes are disabled. But when you click on the first radio button it will make the texbox beside it active.
HTML
<span id="radiobutt">
<input type="radio" name="rad1" value="1" />
<input type="text" id="textbox1" disabled="disabled"/>
<br/>
<input type="radio" name="rad1" value="2" />
<input type="text" id="textbox2" disabled="disabled"/>
<br/>
<input type="radio" name="rad1" value="3" />
<input type="text" id="textbox3" disabled="disabled"/>
</span>
Javascript
$$("#radiobutt input[type=radio]").each(function(i){
$(this).click(function () {
if(i==0) {
$("#textbox1").removeAttr("disabled");
$("#checkbox1").removeAttr("disabled");
}
else {
$("#textbox1").attr("disabled", "disabled");
$("#checkbox1").attr("disabled", "disabled");
}
});
});
Or you can view the working example here
http://jsfiddle.net/fqueT/1/

JQuery: get radio button value

I have the following HTML:
HTML:
<input type="radio" name="abc" value="0" selected="selected" style="display:none" />
<input type="radio" name="abc" value="1" />1+
<input type="radio" name="abc" value="2" />2+
<input type="radio" name="abc" value="3" />3+
JQuery to get the selected radio button
$('input:radio[name=abc]:checked').val();
Why doesn't the code above work on page load, BEFORE a user selected a radio button? It's strange because the code above does work AFTER a user selected a radio button.
It seems to me that I have set the default radio button value to be 0, but if you
Meaning, if the radio button value is selected, return the selected value - otherwise, return 0 (when no value has been selected)

You are using the wrong attribute. For radio buttons you have to use the checked attribute and not the selected attribute.
<input type="radio" checked="checked">
or just:
<input type="radio" checked>

First correct the attribute to checked and remove selected attribute which is wrong and then use the following code.
t will get the selected value of the radiobutton at button click.
ex for list
$("#btn").click(function() {
$('input[type="radio"]:checked').val();
});

Radio has the attribute checked, not selected
<input type="radio" name="abc" value="0" checked="checked" style="display:none" />
<input type="radio" name="abc" value="1" />1+
<input type="radio" name="abc" value="2" />2+
<input type="radio" name="abc" value="3" />3+