根據是/否單選按鈕有條件地顯示/隱藏表格行

我有一個簡單的html表單，其中包含一系列表格中的問題。如果用戶回答「是」/「否」單選按鈕問題，則我想顯示一個隱藏行，允許他們在textarea字段中輸入詳細信息。如果他們點擊否，則textarea輸入應該被清除並再次隱藏。根據是/否單選按鈕有條件地顯示/隱藏表格行

這裏是我的HTML表單一個是/否的問題，一個隱藏的行有關更多詳細信息，如果他們單擊是：

<form class="form-horizontal" action="#" method="post" id="questionForm"> 
     <input type="hidden" name="recid" value="1"> 

     <table class="table table-condensed table-hover table-bordered"> 

      <tr> 
      <td><strong>Question 1</strong></td> 
      <td>please answer yes or no to this question</td> 
      <td> 
       <div class="controls"> 
        <label class="radio inline"> 
      <input type="radio" name="question1" id="question1" value="Yes" required>Yes  </label> 
        <label class="radio inline"> 
      <input type="radio" name="question1" id="question1" value="No" required>No   </label> 
        <label for="question1" class="error"></label> 
     </div> 
      </td> 
      </tr> 


      <tr class="question1yes"> 
      <td></td> 
      <td>Please describe this and when it started</td> 
      <td> 
       <div class="controls"> 
      <textarea name="question1Details" rows="3"></textarea> 
      <label for="question1Details" class="error"></label> 
     </div> 
      </td> 
      </tr> 

      </table> 
</div>    
        <div class="control-group"> 
      <div class="controls"> 
       <button type="submit" class="btn btn-primary">Continue</button> 
       <button type="reset" class="btn">Reset</button> 
      </div> 
     </div> 

     </form>

這裏是我不工作電流腳本：

$().ready(function() { 
     // validate the form when it is submitted 
     $("#questionForm").validate(); 

     if($("#question1:checked").length != 0){ 
        // yes is checked... show the dependent fields 
         $(".question1yes").show(); 
        }else{ 
         // hide it and blank the fields, just in case they have something in them 
         $(".question1yes").hide(); 
         $("#question1Details").val(""); 
        } 


     $("#question1").click(function(){ 
        // show the dependent fields 
        if(this.value == "Yes"){ 
         $("#question1yes").show(); 
        }else{ 
         // hide the dependent fields and blank them 
         $(".question1yes").hide(); 
         $("#question1Details").val(""); 
        } 
        }); 

     });

我已經設置了一個jsFiddle here，它演示了我目前的狀態。我的可選行開始隱藏，但在單擊yes單選按鈕時不會顯示。

來源

2013-07-25 user982124

對於初學者來說：你有ID值這是不允許相同的兩個元素。（ID = 「問題1」）。其實這就是爲什麼它不適合你 – Drew

我已經在短短4個月內回答了這麼多次這個問題我加入了這個網站，我什至不能再打擾了。人們應該在發佈前進行搜索 – melancia

你的無線輸入具有相同的ID，這是不合法的HTML。此外，它正在破壞你的代碼，因爲你不能獨立操縱它們。

我的建議是：

追加_y和_n（或任何你喜歡）的標識，分別。（或使用任何其他唯一 ID）

綁定點擊事件到新的ID。
代碼：

$("#question1_y").click(function() { 
    $(".question1yes").show(); 
}); 

$("#question1_n").click(function() { 
    $(".question1yes").hide(); 
    $(".question1yes textarea").val(""); 
});

來源

2013-07-25 15:05:29 Sakknekedro

試試這個

$().ready(function() { 
    // validate the form when it is submitted 
    $("#questionForm").validate(); 

    if($("#question1:checked").length > 0){ 
       // yes is checked... show the dependent fields 
        $(".question1yes").show(); 
       }else{ 
        // hide it and blank the fields, just in case they have something in them 
        $(".question1yes").hide(); 
        $("#question1Details").val(""); 
       } 


    $("#question1").click(function(){ 
       // show the dependent fields 
       if($(this).val() == "Yes"){ 
        $("#question1yes").show(); 
       }else{ 
        // hide the dependent fields and blank them 
        $(".question1yes").hide(); 
        $("#question1Details").val(""); 
       } 
       }); 

    });

Demo

來源

2013-07-25 14:37:34 Amit

你不能有2個元素具有相同的ID，選擇他們，你可以使用$('.controls input[type="radio"]')或類選擇爲例$('.radio')。

來源

2013-07-25 14:40:35 L105

試試這個下面它的工作，因爲它應該是

$("input:radio[name=question1]").click(function(){ 
    // show the dependent fields 
    if(this.value == "Yes"){ 
    $(".question1yes").show(); 
    }else{ 
    // hide the dependent fields and blank them 
    $(".question1yes").hide(); 
    $("#question1Details").val(""); 
    } 
});

問題是你在呼喚$（「＃question1yes」）顯示（）。而不是$（「。question1yes」）。show（）。 question1yes是在tr not id上實現的類。

希望它會幫助你

來源

2013-07-25 15:02:44

根據是/否單選按鈕有條件地顯示/隱藏表格行

回答

相關問題