使用 jquery 在基於單選按鈕選擇的頁面上啟用 div

Question

如果使用 jquery 從單選按鈕中選擇是或否，我希望能夠啟用 div。 默認是頁面加載時不顯示 div。 當您現在 select 一個單選按鈕時，它會確定顯示哪個 div。

html 代碼如下所示

        <html>
        <head>Testing</head>
        <body>
        <p>Are you 70 years and older?  <input type="radio" value="yes" name="myradiobutton" /> Yes <input type="radio" value="no" name="myradiobutton" /> No</p>

        <div style="display: none" id="yes">
            <p>Yes was selected</p>
        </div>

        <div style="display: none" id="no">
            <p>No was selected</p>
        </div>

        </body>
        </html>

我做了很長時間 jquery 但想知道如何使用下面的 jquery 打開和關閉它。 我怎樣才能寫這個，以便我能夠通過 jquery 控制每個 div 上的 styles（根據單選按鈕選擇打開和關閉它）？

        $(".myradiobutton").click(function(){
            var selectedval = $("#myradiobutton input[type='radio']:checked").val();
            if(selectedval == "yes"){
                //show the yes div
            }
            if(selectedval == "no"){
                //show the no div
            }
        });

Answer 1

Id 必須是唯一的..您只能將它用於一個元素..您可以將相同的 class 用於divs ，因此您可以將它們都隱藏在一個選擇中..您也可以使用這樣的代碼而不是使用 if聲明..我更喜歡使用change事件而不是click收音機，復選框，select

 $("[name='myradiobutton']").on('change', function(){ var selectedval = $("input[type='radio'][name='myradiobutton']:checked").val(); $('.just_test').hide(0).filter('#'+selectedval).show(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Are you 70 years and older? <input type="radio" value="yes" name="myradiobutton" /> Yes <input type="radio" value="no" name="myradiobutton" /> No</p> <div style="display: none" class="just_test" id="yes"> <p>Yes was selected</p> </div> <div style="display: none" class="just_test" id="no"> <p>No was selected</p> </div>

不要忘記在 html 的divs中添加class="just_test"

Answer 2

您嘗試使用#myradiobutton作為查詢選擇器，但#表示您的 HTML 代碼中沒有的元素的id屬性。

要修復它，您不能讓兩個<input type="radio">元素都使用myradiobutton作為id 。

取而代之的是，我的建議是使用<label>來表示<input> s。

下面的例子：

<input type="radio" name="age" value="yes" id="older-than-70">
<label for="older-than-70">Yes</label>
<input type="radio" name="age" value="no" id="younger-than-70">
<label for="younger-than-70">No</label>

<input>元素使用屬性id來標識自己，並使用屬性name="age"與其他<input>進行分組。
<label>元素使用屬性for作為指向具有匹配id的<input>的指針。

使用 jquery 在基於單選按鈕選擇的頁面上啟用 div

問題描述

2 個解決方案

解決方案1
0 已采納 2021-01-21 22:33:20

解決方案2
0 2021-01-21 22:39:10

使用 jquery 在基於單選按鈕選擇的頁面上啟用 div

問題描述

2 個解決方案

解決方案1 0 已采納 2021-01-21 22:33:20

解決方案2 0 2021-01-21 22:39:10

解決方案1
0 已采納 2021-01-21 22:33:20

解決方案2
0 2021-01-21 22:39:10