group radio buttons and toggle input controls using jQuery
Question
I want to show textboxes of the selected radiobutton only. Currently it works as such. But the problem is that when I click on the textbox to type anything, then it will toggle. And also the radio button selection doesn;t change to current selection. Please find the detailed code below
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$(".userid_textbox").hide();
$(".userid").click(function()
{
var kid=$(this).children(".userid_textbox");
var dad=$(this).parent();
var toggledKid = $(dad).find('.toggle');
$(kid).addClass("toggle").show('slow');
$(toggledKid).hide('slow').removeClass('toggle');
});
});
</script>
</head>
<body>
<div class="contentbox tp">
<h1 class="heading">Sites List</h1>
<div style="float:left;margin-right:185px;" class="userid">
<input type="radio" id="" value="Search By UserId" checked/>Search By UserId
<div class="userid_textbox">
<input id="username" maxlength="50" name="username" style="width: 50%;
font-size: 25px;" tabindex="1" type="text" value="" />
</div>
</div>
<div style="float:left;margin-right:100px;display:inline;" class="userid">
<input type="radio" id="" value="Search By Sitename"/>Search By Sitename
<div class="userid_textbox">
<input id="username2" maxlength="50" name="username1" style="width: 50%;
font-size: 25px;" tabindex="1" type="text" value="" />
</div>
</div>
<div style="float:left;margin-right:50px;display:inline;" class="userid">
<input type="radio" id="" value="Search By Expiry date"/>Search By
Expiry date
<div class="userid_textbox">
<input id="username3" maxlength="50" name="username2" style="width: 50%;
font-size: 25px;" tabindex="1" type="text" value="" />
</div>
</div>
</div>
</body>
</html>
6 answers
solution1
1 ACCPTED 2011-07-01 08:44:07
There you go: http://jsfiddle.net/S7cBy/
you need to add same name attribute to your radio buttons to group them, ie:
<input type="radio" name="searchby" id="" value="Search By UserId" checked/>
Search By UserId
<input type="radio" name="searchby" id="" value="Search By Sitename"/>
Search By Sitename
<input type="radio" name="searchby" id="" value="Search By Expiry date"/>
Search By Expiry date
And clean-up your jQuery like so:
$(document).ready(function()
{
$(".userid_textbox").hide();
$('[name="searchby"]').click(function()
{
$(".userid_textbox").hide();
$(this).next(".userid_textbox").show();
});
});
solution2
0 2011-07-01 08:38:05
I editet your markup and javascript a little to achieve what i think you wanted. Look at the fiddle: http://jsfiddle.net/wLF3m/1/
HTML
<div class="contentbox tp">
<h1 class="heading">Sites List</h1>
<div style="float:left;margin-right:185px;" class="userid">
<input type="radio" id="" name='search' value="Search By UserId" checked/>Search By UserId
<div class="userid_textbox">
<input id="username" maxlength="50" name="username" style="width: 50%; font-size: 25px;" tabindex="1" type="text" value="" />
</div></div>
<div style="float:left;margin-right:100px;display:inline;" class="userid">
<input type="radio" id="" name='search' value="Search By Sitename"/>Search By Sitename
<div class="userid_textbox">
<input id="username2" maxlength="50" name="username1" style="width: 50%; font-size: 25px;" tabindex="1" type="text" value="" />
</div></div>
<div style="float:left;margin-right:50px;display:inline;" class="userid">
<input type="radio" id="" name='search' value="Search By Expiry date"/>Search By Expiry date
<div class="userid_textbox">
<input id="username3" maxlength="50" name="username2" style="width: 50%; font-size: 25px;" tabindex="1" type="text" value="" />
</div></div></div>
JS
$(".userid_textbox").hide();
$(".show_first").show();
$("input[name=search]").click(function() {
$('.userid_textbox').hide();
$(this).closest('div.userid').find('.userid_textbox').show('slow');
});
solution3
0 2011-07-01 08:43:49
I have edited markup. Check it: http://jsfiddle.net/EF8Ns/
EDIT : First of all, to make radio button to change selection you should provide the same "name" attribute for each radio button you want to toggle. Next, if you adding event handler for some element (ie div in your case), this event will be fired on any element, which belongs to element you're listening to.
solution4
0 2011-07-01 08:44:37
First add names for all input:radio
<input type="radio" ... name="testname"/>
<input type="radio" ... name="testname"/>
<input type="radio" ... name="testname"/>
Second - don't use click for div. use click for input:radio :
$("input:radio").click(function()
{
...
});
solution5
0 2011-07-01 08:44:54
@Nicola_Peluchetti you beat me too it.
I was just going to post this.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(function ()
{
$(':text:not(:first)').hide();
$(':radio').click(function (e)
{
$(':text').hide();
$(this).parent().find(':text').show();
return true;
});
});
</script>
</head>
<body>
<div class="contentbox tp">
<h1 class="heading">
Sites List</h1>
<div style="float: left; margin-right: 185px;" class="userid">
<input type="radio" id="rdo1" name="blue" value="Search By UserId" checked="checked" />Search
By UserId
<div class="userid_textbox">
<input id="username" maxlength="50" name="username" style="width: 50%; font-size: 25px;"
tabindex="1" type="text" value="" />
</div>
</div>
<div style="float: left; margin-right: 100px; display: inline;" class="userid">
<input type="radio" id="rdo2" name="blue" value="Search By Sitename" />Search By
Sitename
<div class="userid_textbox">
<input id="username2" maxlength="50" name="username1" style="width: 50%; font-size: 25px;"
tabindex="1" type="text" value="" />
</div>
</div>
<div style="float: left; margin-right: 50px; display: inline;" class="userid">
<input type="radio" id="rdo3" name="blue" value="Search By Expiry date" />Search
By Expiry date
<div class="userid_textbox">
<input id="username3" maxlength="50" name="username2" style="width: 50%; font-size: 25px;"
tabindex="1" type="text" value="" />
</div>
</div>
</div>
</body>
</html>
You would have to put context into the jquery statements.
solution6
0 2011-07-01 08:47:44
remove this part
$(toggledKid).hide('slow').removeClass('toggle');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.