Javascript 使用jQuery组合单选按钮和切换输入控件_Javascript_Jquery

Javascript 使用jQuery组合单选按钮和切换输入控件

javascript jquery

Javascript 使用jQuery组合单选按钮和切换输入控件,javascript,jquery,Javascript,Jquery,我只想显示所选单选按钮的文本框。目前它是这样工作的。但问题是，当我点击文本框键入任何内容时，它会切换。而且单选按钮选择也不正确；不要更改为当前选择。请在下面查找详细代码 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </script> <script> $(document).ready(functi

我只想显示所选单选按钮的文本框。目前它是这样工作的。但问题是，当我点击文本框键入任何内容时，它会切换。而且单选按钮选择也不正确；不要更改为当前选择。请在下面查找详细代码

<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>


$（文档）.ready（函数（）
{
$（“.userid_textbox”）.hide（）；
$（“.userid”）。单击（函数（）
{
var kid=$（this.childs（“.userid_textbox”）；
var dad=$（this.parent（）；
var-toggledKid=$（dad.find（'.toggle'）；
$（kid）.addClass（“切换”）.show（“慢”）；
$（toggledKid）.hide（'slow'）.removeClass（'toggle'）；
});
});
网站列表
按用户ID搜索
按站点名称搜索
搜寻
到期日

我对您的标记和javascript进行了一些编辑，以实现我认为您想要的功能。看看小提琴：

HTML

我编辑了标记。检查它：

编辑：首先，要使单选按钮更改选择，您应该为要切换的每个单选按钮提供相同的“名称”属性。接下来，如果您为某个元素添加事件处理程序（例如，在您的示例中为div），则此事件将在属于您正在侦听的元素的任何元素上触发。

好了：

您需要向单选按钮添加相同的名称属性以对其进行分组，即：

<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

首先为所有

input:radio添加名称
<input type="radio" ... name="testname"/>
<input type="radio" ... name="testname"/>
<input type="radio" ... name="testname"/>

@尼古拉·佩鲁切蒂你也打败了我
我正要把这个发出去
<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>


$（函数（）
{
$（'：text:not（：first'）.hide（）；
$（':radio'）。单击（函数（e）
{
$（'：text'）.hide（）；
$（this.parent（）.find（':text'）.show（）；
返回true；
});
});
网站列表
搜寻
按用户ID
搜寻
站点名称
搜寻
截止日期

您必须将上下文放入jquery语句中。
删除此部分
$(toggledKid).hide('slow').removeClass('toggle');

由于：radio
是jQuery扩展，而不是CSS规范的一部分，因此使用：radio
的查询无法利用本机DOMquerySelectorAll（）
方法提供的性能提升。要在现代浏览器中获得更好的性能，请改用[type=“radio”]。
<input type="radio" ... name="testname"/>
<input type="radio" ... name="testname"/>
<input type="radio" ... name="testname"/>

$("input:radio").click(function()
{
   ...
});

<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>

$(toggledKid).hide('slow').removeClass('toggle');