所以我尝试根据所选的 radio 显示某些字段，我觉得我很接近，但它不起作用，我没有收到错误。
所以我定义了所有 DOM 元素，设置了更改事件监听器，然后调用它们。我还在有效的类上设置了默认显示:无。
const intSelect = document.querySelector('#internal_form');
const extSelect = document.querySelector('#external_url');
const intForm = document.querySelector('.internal_form');
const extForm = document.querySelector('.external_form');
function show() {
intSelect.addEventListener('change', showOne);
extSelect.addEventListener('change', showOne);
}
let showOne = event => {
event.preventDefault();
showTheThings(event.currentTarget, intForm, extForm);
}
let showTheThings = (target, div) => {
if (target.checked = true) {
div.classList.remove('hide');
} else {
div.classList.add('hide');
div.querySelectorAll('input[type="radio"]').forEach(function(el) {
el.checked = false;
});
}
};.external_form.hide,
.internal_form.hide{
display: none;
}<form>
<div class="form-group radio-format">
<label>Method</label>
<div class="col-sm-10">
<input class="trigger form-check-input" type="radio" value="Internal Form" name="event[registration]" id="internal_form">
<label class="form-check-label" for="internal_form">Internal Form</label>
<input class="trigger form-check-input" type="radio" value="External URL" name="event[registration]" id="external_url">
<label class="form-check-label" for="external_url">Internal Form</label>
</div>
</div>
<div class="internal_form hide">
<h2>Internal</h2>
</div>
<div class="external_form hide">
<h2>External</h2>
</div>
</form>然而什么也没有发生。虽然当我在浏览器中测试时，它会在 intSelect 上应用更改，但在单击 extSelect 时不会删除(奇怪的是它在这里不起作用)。
我也尝试过非常通用的 JS，比如:
function show(){
if (intSelect.checked =true) {
intForm.classList.remove('hide');
} else {
intForm.classList.add('hide');
};
}
这同样适用于删除类但不触发添加。
我在这里错过了什么？
最佳答案
这是使用 ID 的简单代码，并通过添加和删除类
<!DOCTYPE html>
<head>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
<style type="text/css">
.external_form.hide,
.internal_form.hide{
display: none;
}
</style>
</head>
<body >
<form>
<div class="form-group radio-format">
<label>Method</label>
<div class="col-sm-10">
<input class="trigger form-check-input" type="radio" value="Internal Form" name="event[registration]" id="internal_url">
<label class="form-check-label" for="internal_url">Internal Form</label>
<input class="trigger form-check-input" type="radio" value="External URL" name="event[registration]" id="external_url">
<label class="form-check-label" for="external_url">external Form</label>
</div>
</div>
<div id="internal" class="internal_form hide">
<h2>Internal</h2>
</div>
<div id="external" class="external_form hide">
<h2>External</h2>
</div>
</form>
</body>
</html>
<script>
var internal = document.getElementById("internal");
var external = document.getElementById("external");
document.getElementById("internal_url").addEventListener("click", function(){
internal.classList.remove("hide");
external.classList.add("hide");
console.log("internal" , internal);
});
document.getElementById("external_url").addEventListener("click", function(){
internal.classList.add("hide");
external.classList.remove("hide");
});
</script>
代码简单，一看就会明白。如果您有任何疑问，请随时询问。
关于JavaScript Radio Toggle 基于选中显示不同的表单字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57893972/