堆棧內存溢出
  簡體   English   中英

使用 jQuery 組合單選按鈕和切換輸入控件

[英]group radio buttons and toggle input controls using jQuery

 原文  2011-07-01 08:20:48  3   6    javascript/ jquery

問題描述

我只想顯示所選單選按鈕的文本框。 目前它是這樣工作的。 但問題是，當我單擊文本框輸入任何內容時，它會切換。 而且單選按鈕選擇不會更改為當前選擇。 請在下面找到詳細代碼

<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 個解決方案

解決方案1
 1 已采納  2011-07-01 08:44:07

你有 go： 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();
  });
});

解決方案2
 0  2011-07-01 08:38:05

我編輯了你的標記和 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');

});

解決方案3
 0  2011-07-01 08:43:49

我已經編輯了標記。 檢查它： http://jsfiddle.net/EF8Ns/

編輯：首先，要使單選按鈕更改選擇，您應該為要切換的每個單選按鈕提供相同的“名稱”屬性。 接下來，如果您為某個元素添加事件處理程序（即在您的情況下為 div），則此事件將在屬於您正在收聽的元素的任何元素上觸發。

解決方案4
 0  2011-07-01 08:44:37

首先為所有input:radio

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

第二 - 不要對 div 使用 click。 使用點擊input:radio ：

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

解決方案5
 0  2011-07-01 08:44:54

@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 語句中。

解決方案6
 0  2011-07-01 08:47:44

刪除這部分

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 組合功能，使用jQuery在一組單選按鈕中的單選按鈕旁邊顯示輸入字段 jQuery-從按鈕組獲取活動按鈕（輸入類型=“單選”） jQuery：在 keydown 上的兩個單選按鈕之間切換 jQuery驗證 - 使用自定義單選按鈕（打開/關閉） jQuery切換單選按鈕上的背景顏色 jQuery 在兩個單選按鈕上切換背景顏色 在jQuery中的兩個單選按鈕之間切換類 將Jquery與單選按鈕一起使用 使用jQuery更改組中單選按鈕的value屬性 嘗試使用滑動在一組帶有 Jquery 的單選按鈕中循環
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM