如何在JS中獲取選中的單選按鈕？

Question

我已經看到這適用於大多數用戶，但由於某種原因它不適合我。 我使用谷歌瀏覽器。

radioBut = document.querySelector(".rad-design")
getColor = function(){
for (i=0; i<radioBut.length; i++){
    if (radioBut[i].checked){
        console.log(radioBut[i)   
    }
}

Html

                <form id = "rad">
                    <div class = "radioAll">
                        <label class="rad-label">
                            <input type="radio" class="rad-input"  name="colList">
                            <div class="rad-design"></div>
                        </label>
                        <label class="rad-label">
                            <input type="radio" class="rad-input"  name="colList">
                            <div class="rad-design"></div>
                        </label>
                    </div>       
                  </form>

Answer 1

 const radioBut = document.querySelectorAll(".rad-input") getColor = function () { for (i = 0; i < radioBut.length; i++) { if (radioBut[i].checked) { console.log(radioBut[i]) } } }

 <form id="rad"> <div class="radioAll"> <label class="rad-label"> <input type="radio" class="rad-input" check name="colList"> <div class="rad-design">One</div> </label> <label class="rad-label"> <input type="radio" class="rad-input" check name="colList"> <div class="rad-design">Two</div> </label> </div> <button type="button" onclick="getColor()">getColor</button> </form>

Answer 2

document.querySelector只返回一個元素而不是數組/列表，因此在i<radioBut.length radioBut.length is undefined的 for 循環中，您需要使用document.querySelectorAll()代替。

我還注意到您選擇了 div 而不是輸入，並且您有幾個語法錯誤。

也許這可以幫助你：

 const radioBut = document.querySelectorAll(".rad-input") const getColor = function(){ for (let i=0; i<radioBut.length; i++){ if (radioBut[i].checked){ console.log(radioBut[i].value) } } } console.log(getColor())

 <form id = "rad"> <div class = "radioAll"> <label class="rad-label"> <input type="radio" class="rad-input" value='A' name="colList"> <div class="rad-design"></div> </label> <label class="rad-label"> <input type="radio" class="rad-input" value='B' name="colList" checked> <div class="rad-design"></div> </label> </div> </form>

另一種選擇是使用form元素功能

 const form = document.getElementById('rad'); const getColor = function(){ return form.colList.value; } console.log(getColor())

 <form id = "rad"> <div class = "radioAll"> <label class="rad-label"> <input type="radio" class="rad-input" value='A' name="colList"> <div class="rad-design"></div> </label> <label class="rad-label"> <input type="radio" class="rad-input" value='B' name="colList" checked> <div class="rad-design"></div> </label> </div> </form>