我嘗試使用 class 名稱顯示單選按鈕的值

Question

我還是編碼新手。 我希望我能得到你的善意回應。
請多多包涵：）謝謝
Anws，我試圖顯示這些單選按鈕的值，但它仍然不會顯示。
當我使用 javascript 選擇單選按鈕時，我可以知道如何獲取.custom-control-input的值嗎？
我可以知道我在哪里做錯了嗎？

PS：我還沒有在這里添加 css，我只需要顯示這些單選按鈕的值。

 function otcContinue_onClick() { var tac = document.getElementsByClassName('custom-control-input'); if (tac.checked) { if ($("input[name=exampleRadios]:checked").val()) { document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block"; document.getElementById('pmethods').style.display = "none"; } else { $('#errorMsg').text("Please select preferred payment option."); $('#modalError').modal('show'); } } }

 <div id="pmethods"> <.-- otc tab --> <div class="card"> <div class="card-header bg-blueberry" id="headingOne"> <h6 class="mb-0"> <a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments </a> </h6> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <span class="small">Pay in cash at the nearest payment nearest center.</span> <div class="row"> <div class="col-md-6 col-xs-12 mt-2"> <div class="custom-control custom-radio"> <input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" /> <label class="custom-control-label text-md-left" for="exampleRadios1"> <span class="pm-icon-holder"> <img src="images/otc-icons/sm;png" alt="SM" /> </span> &nbsp: <span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span> </label> <br /> </div> </div> </div> <div class="row mt-2"> <div class="col-md-4 offset-md-8"> <button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button> </div> </div> </div> </div> </div> <.-- end otc tab --> </div> <div class="mt-3"> <.-- sm form --> <div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none"> <div class="card-body text-prussian-blue"> <div class="selected-logo mb-2"> <img src="images/logos/logo_sm.png" alt="Payment Logo" /> </div> <span class="card-text small">Pay in cash at the following stores. See complete list <a href="https.//ptiapps.paynamics.net/OtcService/sm-guide/index.html" target="_blank" class="text-apricot font-weight-bold">here</a>.</span> <br /> <br /> <span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span> <br /> <div class="row mt-4"> <div class="col-md-4 offset-md-8 mb-1"> <button type="submit" class="btn btn-apricot btn-block">Continue</button> </div> <div class="col-md-4 offset-md-8 mb-1 text-center"> <a href="#" class="text-blueberry font-weight-bold small"><u>Go Back</u></a> </div> </div> </div> </div> <!-- end sm form --> <br /> </div>

Answer 1

我已經更改了你的 JS，所以當你點擊一個輸入時，你會得到它的返回值。 在這種情況下 - otc_sm 。

 $("input[name=exampleRadios]").on('click', function() { console.log($(this).val()); document.getElementById($("input[name=exampleRadios]:checked").val()).style.display = "block"; document.getElementById('pmethods').style.display = "none"; })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="pmethods"> <.-- otc tab --> <div class="card"> <div class="card-header bg-blueberry" id="headingOne"> <h6 class="mb-0"> <a class="collapsed text-apple-core-light" role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">Over-the-Counter Payments </a> </h6> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <span class="small">Pay in cash at the nearest payment nearest center.</span> <div class="row"> <div class="col-md-6 col-xs-12 mt-2"> <div class="custom-control custom-radio"> <input class="custom-control-input" type="radio" name="exampleRadios" id="exampleRadios1" value="otc_sm" /> <label class="custom-control-label text-md-left" for="exampleRadios1"> <span class="pm-icon-holder"> <img src="images/otc-icons/sm;png" alt="SM" /> </span> &nbsp: <span class="text-prussian-blue font-weight-bold small">SM Bills Pay</span> </label> <br /> </div> </div> </div> <div class="row mt-2"> <div class="col-md-4 offset-md-8"> <button type="button" class="btn btn-apricot btn-block" onclick="otcContinue_onClick()">Continue</button> </div> </div> </div> </div> </div> <.-- end otc tab --> </div> <div class="mt-3"> <.-- sm form --> <div id="otc_sm" class="card border-secondary mb-3 bg-payment" style="display: none"> <div class="card-body text-prussian-blue"> <div class="selected-logo mb-2"> <img src="images/logos/logo_sm.png" alt="Payment Logo" /> </div> <span class="card-text small">Pay in cash at the following stores. See complete list <a href="https.//ptiapps.paynamics.net/OtcService/sm-guide/index.html" target="_blank" class="text-apricot font-weight-bold">here</a>.</span> <br /> <br /> <span class="card-text small">Please write down the SM Bills Payment Reference Number that will be generated once transaction has been initiated. An email will be sent to you with the transaction details.</span> <br /> <div class="row mt-4"> <div class="col-md-4 offset-md-8 mb-1"> <button type="submit" class="btn btn-apricot btn-block">Continue</button> </div> <div class="col-md-4 offset-md-8 mb-1 text-center"> <a href="#" class="text-blueberry font-weight-bold small"><u>Go Back</u></a> </div> </div> </div> </div> <!-- end sm form --> <br /> </div>