jQuery的 - 根據選定的單選按鈕顯示隱藏字段

我有幾個無線電inut領域，具有特定的值，選擇時，我想顯示一個輸入字段，所以我的代碼是：jQuery的 - 根據選定的單選按鈕顯示隱藏字段

 <label for="adult">Adult</label> 
     <input type="radio" name="type" value="45" /> 
     <label>Number</label><input type="text" id="dob" /> 

     <label for="adult">Student</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label><input type="text" id="dob" /> 

     <label for="adult">Child</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label><input type="text" id="dob" />

您可以看到Student和Child按鈕都有一個D.O.B字段。我需要隱藏它，並且只有在選擇了所選收音機時纔會顯示。

我最大的問題是，兩者都有相同的value（這是基於價格，這是相同的）。

我將如何定位每個特定的電臺來顯示D.O.B字段？我可以向每個人添加一個類/標識並以這種方式定位它們嗎？

感謝

來源

2011-05-04 terrid25

你是對的...按類別訪問它們 – 2011-05-04 11:18:04

ID必須是唯一的！ – 2011-05-04 11:19:11

第一：ID應該是唯一的（多個id="dob"是壞的）

要回答你的問題：給每個輸入來顯示/隱藏類（這裏：dob）每個單選按鈕，其中有一個DOB場另一個（這裏：show_dob）。然後，你可以這樣做：

<script type="text/js"> 
$(function() { 

    $('input.dob').hide(); // hide all first 
    $('input[type="radio"]').click(function() { 
     $('input.dob').hide(); // hide all on click 
     if($(this).hasClass('show_dob')) { // only if the radio button has a dob-field 
      $(this).nextAll('input.dob:first').show(); // show only the following first 
     } 
    }); 

}); 
</script> 

    <label for="adult">Adult</label> 
    <input type="radio" name="type" value="45" /> 
    <label>Number</label><input type="text" /> 

    <label for="adult">Student</label> 
    <input class="show_dob" type="radio" name="type" value="5" /> 
    <label>D.O.B</label><input class="dob" type="text" /> 

    <label for="adult">Child</label> 
    <input class="show_dob" type="radio" name="type" value="5" /> 
    <label>D.O.B</label><input class="dob" type="text" />

來源

2011-05-04 12:14:52 Markus

這個作品完美！ – terrid25 2011-05-04 12:38:52

查看http://api.jquery.com/category/selectors/和http：// api。 jquery.com/category/traversing/。研究一些例子，你會學會自己解決這些問題。如果你再次陷入困境，試試它並開啓一個新問題，但你可以自己解決你的評論。 – Markus 2011-05-04 19:43:17

<script> 
     $(document).ready(
     function() 
     { 
      $('input').click(
      function() 
      { 
       $(this).next().next().attr('value', $(this).attr('value')); 
      }); 
     }); 
</script> 

</head> 
<body style="font-size: 62.5%;"> 
    <label for="adult">Adult</label> 
     <input type="radio" name="type" value="45" /> 
     <label>Number</label><input type="text" id="dob" /> 

     <label for="adult">Student</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label><input type="text" id="dob" /> 

     <label for="adult">Child</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label><input type="text" id="dob" /> 
</body>

來源

2011-05-04 11:25:42

當選擇單選按鈕時，不顯示/隱藏輸入。 – terrid25 2011-05-04 11:37:03

添加標記classesl。類=「studentVisible「和class =「childVisible「

來源

2011-05-04 11:29:58

<script> 
     $(document).ready(
     function() 
     { 
      $('input').click(
      function() 
      { 
       $("[id$='dob']").attr('value', $(this).attr('value')); 
      }); 
     }); 
</script> 

</head> 
<body style="font-size: 62.5%;"> 
    <label for="adult">Adult</label> 
     <input type="radio" name="type" value="45" /> 
     <label>Number</label> 

     <label for="adult">Student</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label> 

     <label for="adult">Child</label> 
     <input type="radio" name="type" value="5" /> 
     <label>D.O.B</label> 
     <br /> 
     <br /> 
     <input type="text" id="dob" /> 
</body>

只有一個文本框，顯示每次點擊

來源

2011-05-04 12:15:40

檢查了這一點：

您需要恰克小的HTML結構：

HTML

 <label for="adult">Adult</label> 
     <input type="radio" name="type" value="45" /> 
     <label class="lhidden">Number</label><input type="text" class="dob ihidden"/> 

     <label for="adult">Student</label> 
     <input type="radio" name="type" value="5" /> 
     <label class="lhidden">D.O.B</label><input type="text" class="dob ihidden"/> 

     <label for="adult">Child</label> 
     <input type="radio" name="type" value="5" /> 
     <label class="lhidden">D.O.B</label><input type="text" class="dob ihidden"/>

JQUERY

$(function() { 
    $('.ihidden,.lhidden').hide(); 
    $('input[type="radip"]').attr('checked', ''); 
    $('input[type="radio"]').click(function() { 
     $('input[type="radio"]:visible').attr('checked', ''); 
     $('.ihidden:visible, .lhidden:visible').hide(); 
     $(this).attr('checked', 'checked').next().show().next().show(); 
    }); 
});

如果不行請評論我。

來源

2011-05-04 12:27:06 thecodeparadox

這對我不起作用 – terrid25 2011-05-04 14:55:56

jQuery的 - 根據選定的單選按鈕顯示隱藏字段

回答

相關問題