我的 HTML 代碼：<ul class="nav md-pills pills-default flex-column" role="tablist"> <li class="nav-item"> <input type="radio" name="q01" value="1" hidden checked> <a class="nav-link choice01 active" data-toggle="tab" href="#answer1-1" role="tab">1</a> </li> <li class="nav-item"> <input type="radio" name="q01" value="2" hidden> <a class="nav-link choice01" data-toggle="tab" href="#answer1-2" role="tab">2</a> </li> <li class="nav-item"> <input type="radio" name="q01" value="3" hidden> <a class="nav-link choice01" data-toggle="tab" href="#answer1-3" role="tab">3</a> </li> <li class="nav-item"> <input type="radio" name="q01" value="4" hidden> <a class="nav-link choice01" data-toggle="tab" href="#answer1-4" role="tab">4</a> </li></ul>我的JS代碼：const choices01 = document.getElementsByClassName("choice01");const inputs01 = document.querySelectorAll("input[name=q01]");for (let k=0; k<choices01.length; k++) { choices01[k].addEventListener("click", function(){ inputs01[k].checked = true; });}我有幾個問題，每個問題都有一個“a”元素和“choice[numberOfTheQuestion]”類。對于它們中的每一個，我都有一個隱藏的無線電輸入，當我單擊元素“a”時我想檢查它。但是，當我在 for 中執行 console.log(inputs01[k]) 并單擊 4 個選項之一時，該選項將顯示為沒有選中，就好像我沒有單擊一樣。注意：inputs01[k] 向我發送回我單擊的正確元素...
3 回答
HUH函數
TA貢獻1836條經驗 獲得超4個贊
element.checked = true;有效，它只是不修改 html。
要驗證某個元素是否經過良好檢查，您不應該這樣做console.log(element)（這只會返回沒有檢查的元素），而應該創建 aconsole.log(element.checked)并在控制臺中查看是否有 true（已檢查）或 false（未檢查）。
慕森卡
TA貢獻1806條經驗 獲得超8個贊
設置checked屬性似乎不起作用，但setAttribute確實有效。單擊下面的結果會導致checked屬性從false變為true，如您在日志中看到的那樣：
const choices01 = document.getElementsByClassName("choice01");
const inputs01 = document.querySelectorAll("input[name=q01]");
for (let k = 0; k < choices01.length; k++) {
choices01[k].addEventListener("click", function() {
console.log(inputs01[k].checked);
inputs01[k].setAttribute('checked', true);
console.log(inputs01[k].checked);
});
}
<ul class="nav md-pills pills-default flex-column" role="tablist">
<li class="nav-item">
<input type="radio" name="q01" value="1" checked hidden>
<a class="nav-link choice01 active" data-toggle="tab" href="#answer1-1" role="tab">1</a>
</li>
<li class="nav-item">
<input type="radio" name="q01" value="2" hidden>
<a class="nav-link choice01" data-toggle="tab" href="#answer1-2" role="tab">2</a>
</li>
<li class="nav-item">
<input type="radio" name="q01" value="3" hidden>
<a class="nav-link choice01" data-toggle="tab" href="#answer1-3" role="tab">3</a>
</li>
<li class="nav-item">
<input type="radio" name="q01" value="4" hidden>
<a class="nav-link choice01" data-toggle="tab" href="#answer1-4" role="tab">4</a>
</li>
</ul>
喵喵時光機
TA貢獻1846條經驗 獲得超7個贊
目前還不清楚你想從你的問題中得到什么。您已經為輸入設置了隱藏屬性，因此它不會顯示，但當您單擊 a 標簽時它確實發生了變化。
如果您想在單擊特定標簽時將單選按鈕顯示為選中狀態，則需要將該特定輸入的隱藏屬性設置為 false。 https://jsfiddle.net/y718p9k3/3/
const choices01 = document.getElementsByClassName("choice01");
const inputs01 = document.querySelectorAll("input[name=q01]");
for (let k=0; k<choices01.length; k++) {
choices01[k].addEventListener("click", function(){
inputs01[k].checked = true;
for (let j=0;j<inputs01.length;j++) {
inputs01[j].hidden = true;
}
inputs01[k].hidden = false;
});
}
- 3 回答
- 0 關注
- 141 瀏覽
添加回答
舉報
0/150
提交
取消