Question

我想只显示所选单选按钮的文本框。目前它的工作原理。但问题是，当我点击文本框键入任何内容时，它将切换。并且单选按钮选择也不会改变为当前选择。请在下面找到详细的代码

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

Answer 1

你去了：http://jsfiddle.net/S7cBy/

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

<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

并像这样清理你的jQuery：

$(document).ready(function()
{
  $(".userid_textbox").hide();
  $('[name="searchby"]').click(function()
  {
    $(".userid_textbox").hide();
    $(this).next(".userid_textbox").show();
  });
});

Answer 2

我编辑你的标记和javascript以实现我认为你想要的东西。看看小提琴：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');

});

Answer 3

我已编辑过标记。检查一下：http://jsfiddle.net/EF8Ns/

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

Answer 4

首先为所有input:radio

添加名称

<input type="radio" ... name="testname"/>
<input type="radio" ... name="testname"/>
<input type="radio" ... name="testname"/>

第二 - 不要使用click for div。使用点击input:radio：

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

Answer 5

@Nicola_Peluchetti你也打败了我。

我只想发布这个。

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

您必须将上下文放入jquery语句。

Answer 6

删除此部分

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

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

6 个答案: