Javascript:当其他 15 个单选按钮与同一类一起检查时，如何启用单选按钮?

Question

我正在尝试在单击其他 15 个单选按钮(下面的代码片段(后启用单选按钮。如何在纯JS(没有jQuery(中执行此操作？

<div class="assessment-question">
<span><em>{% trans "I do more than what's expected of me" %}</em></span>
<ul class="assessment-answer-list">
<li>
<input type="radio" name="question11" value="0-0" class="assess_answers" required> {% trans 'Never' %}
</li>
<li>
<input type="radio" name="question11" value="1-0" class="assess_answers"> {% trans 'Rarely' %}
</li>
<li>
<input type="radio" name="question11" value="2-1" class="assess_answers"> {% trans 'Sometimes' %}
</li>
<li>
<input type="radio" name="question11" value="3-1" class="assess_answers"> {% trans 'Often' %}
</li>
<li>
<input type="radio" name="question11" value="4-1" class="assess_answers"> {% trans 'Always' %}
</li>
</ul>
</div>
<div class="assessment-question">
<span><em>{% trans 'I feel comfortable around people' %}</em></span>
<ul class="assessment-answer-list">
<li>
<input type="radio" name="question12" value="0-0" class="assess_answers" required> {% trans 'Never' %}
</li>
<li>
<input type="radio" name="question12" value="1-0" class="assess_answers"> {% trans 'Rarely' %}
</li>
<li>
<input type="radio" name="question12" value="2-1" class="assess_answers"> {% trans 'Sometimes' %}
</li>
<li>
<input type="radio" name="question12" value="3-1" class="assess_answers"> {% trans 'Often' %}
</li>
<li>
<input type="radio" name="question12" value="4-1" class="assess_answers"> {% trans 'Always' %}
</li>
</ul>
</div>

我目前有一个禁用的"下一步"单选按钮，我想在选中上述所有 15 个(仅显示几个(后启用它。它们都有相同的类名，所以我可以在同一个保护伞下识别它们。

我尝试了几种不起作用的解决方案。我尝试过的解决方案似乎都需要在选中每个单选按钮时激活一个功能。

我可以使用addEventListener什么的吗？

Answer 1

只需使用document.getElementsByClassName 获取所有值，跟踪值(AKA，使用函数检查是否所有值都为真(，添加一些事件侦听器，以便在检查时，然后单击等，然后检查所有值是否为真。例如：

var checkedBoxes = Array.apply(null,document.getElementsByClassName("myClassName"));
checkedBoxes.forEach(x => {
x.addEventListener("click", onActive);
x.addEventListener("focus", onActive);
x.addEventListener("blur", onActive);
//other event listeeners
});
function checkAll() {
return !checkedBoxes.find(x => !x.checked) //can't find any radio button whose value is false, which means they are all true, which means they are all checked
}
function onActive(e) {
if(checkAll()) {
//activate next button
}
}

Answer 2

看看这个真实的片段，看看怎么做

const myForm  = document.getElementById('my-form')
,   gRnames = [...new Set([...myForm.elements].filter(n=>(n.type==='radio')).map(n=>n.name))]
;
function SetButtonNextOnOff()
{
let answers = gRnames.reduce((tot,el)=>tot+=myForm[el].value===''?0:1,0)
myForm.bt_next.disabled = (answers!=gRnames.length)
}
SetButtonNextOnOff()
;
myForm.oninput = SetButtonNextOnOff  
;
myForm.onsubmit =e=>
{
e.preventDefault()
console.clear()
Array.from(new FormData(myForm),e=>console.log(e[0],'->',e[1]))
myForm.reset()
}
myForm.onreset =_=>{ myForm.bt_next.disabled = true }
;

label { display:block; }
fieldset { margin:1em; width:23em; }
.as-console-wrapper {
max-height: 100% !important;
width: 30% !important;
top: 0; left: 70% !important;
}

<form action="xxx" id="my-form" >
<fieldset>
<legend>I do more than what's expected of me </legend>
<label><input type="radio" name="question11" value="0-0"> Never     </label>
<label><input type="radio" name="question11" value="1-0"> Rarely    </label>
<label><input type="radio" name="question11" value="2-1"> Sometimes </label>
<label><input type="radio" name="question11" value="3-1"> Often     </label>
<label><input type="radio" name="question11" value="4-1"> Always    </label>
</fieldset>
<fieldset>
<legend>I feel comfortable around people</legend>
<label><input type="radio" name="question12" value="0-0"> Never     </label>
<label><input type="radio" name="question12" value="1-0"> Rarely    </label>
<label><input type="radio" name="question12" value="2-1"> Sometimes </label>
<label><input type="radio" name="question12" value="3-1"> Often     </label>
<label><input type="radio" name="question12" value="4-1"> Always    </label>
</fieldset>
<button name="bt_next" type="submit">Next</button>
<button type="reset">reset</button>
</form>

Answer 3

如果要选中所有 15 个单选按钮，则它们的 name 属性应彼此不同

每个单选元素都应为事件定义单击/更改事件和函数，以识别它是否被单击

。每次单击单选按钮时，请检查它是否已启用/禁用，并相应地更新所需单选按钮数量的计数器。

将其与具有相同类的单选按钮(getElementsByClassName((((进行比较

如果计数相同表示所有必需的单选按钮都已启用，则可以在事件功能中手动启用下一个单选按钮