ラジオボタンをグループ化し、jQueryを使用して入力コントロールを切り替えます

選択したラジオボタンのテキストボックスのみを表示します。現在、それはそのように動作します。しかし、問題は、何かを入力するためにテキストボックスをクリックすると、それはトグルすることです。ラジオボタンの選択も現在の選択に変更されません。以下の詳細なコードを見つけてくださいラジオボタンをグループ化し、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>

出典

2011-07-01 rubyist

あり、あなたが行く：http://jsfiddle.net/S7cBy/

あなたはすなわち、グループにあなたのラジオボタンにそれらを同じname属性を追加する必要があります。

<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(); 
    }); 
});

出典

2011-07-01 08:44:07 Tsar

私はあなたが望むと思うものを達成するためにあなたのマークアップと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>

$(".userid_textbox").hide(); 
$(".show_first").show(); 
$("input[name=search]").click(function() { 
    $('.userid_textbox').hide(); 
    $(this).closest('div.userid').find('.userid_textbox').show('slow'); 

});

出典

2011-07-01 08:38:05

私は、マークアップを編集しました。それを確認してください：http://jsfiddle.net/EF8Ns/

EDIT：すべてのまず、あなたが切り替えたい各ラジオボタンに同じ「名前」属性を提供しなければならない選択を変更するラジオボタンを作るために。次に、いくつかの要素（つまり、ケースのdiv）にイベントハンドラを追加すると、このイベントは、あなたが聴いている要素に属するすべての要素に対して発生します。

出典

2011-07-01 08:43:49 sigurd

最初にすべての名前を追加input:radio

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

2番目 - divをクリックしないでください。

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

出典

2011-07-01 08:44:37

を削除 'ので：radio'では、jQueryの延長ではなく、CSSの仕様の一部であり、'使用して照会：radio'では、ネイティブのDOM 'が提供するパフォーマンス向上の利点を取ることができないquerySelectorAll （） 'メソッドを呼び出します。現代のブラウザーでのパフォーマンスを向上させるには、代わりに '[type =" radio "]'を使用してください。 – darcher

をあなたもそれを私を打つ@Nicola_Peluchetti：input:radioのためにクリックしてください。

私はちょうどこれを投稿するつもりでした。

<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ステートメントにコンテキストを配置する必要があります。

出典

2011-07-01 08:44:54 Qpirate

この部分に

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

出典

2011-07-01 08:47:44 user555600

ラジオボタンをグループ化し、jQueryを使用して入力コントロールを切り替えます

答えて

関連する問題