javascript - 使用纯javascript:如果选中一个单选按钮,则仅显示下一部分
问题描述
我只想在用户在第一部分中选择一个单选按钮后才显示表单的第二部分。我正在尝试仅使用 javascript 来执行此操作,但没有效果。我很确定问题在于在正确的时间触发该功能。如果我之后用按钮触发它,它就可以工作!但我希望它自动触发而不需要外部按钮。
这是HTML:
<input type="radio" name="entreprise_ou_particulier" value="Vous êtes un particulier" id="particulier1">
<label for="particulier1">
<span>
Je suis un particulier
</span>
</label>
<div class="item" id="declaration2">
<input type="radio" name="choix_de_produit" value="Déclaration d'impôts" id="declaration1">
<label for="declaration1">
<span>
Déclaration d'impôts
</span>
</label>
</div>
和Javascript:
if (document.getElementById("particulier1").checked) {
document.getElementById("declaration2").style.display = 'block';
}
else {
document.getElementById("declaration2").style.display = 'none';
}
太感谢了!!!
解决方案
它是一个<input>
,您可以使用该change
事件。
let check = document.getElementById("particulier1")
check.addEventListener("change", myFunction)
function myFunction (event) {
if (this.checked) {
document.getElementById("declaration2").style.display = 'block';
}
else {
document.getElementById("declaration2").style.display = 'none';
}
}
推荐阅读
- android - 如何修复新 Place SDK for android 使用的错误
- javascript - 反应原生firebase检查用户是否已经存在于实时数据库中
- c++ - 调整向量大小时,我们可以通过什么方式防止引用和对象之间的故障?
- android - 由于 Google Play 最近宣布,将 64 位兼容性集成到 32 位 android apk
- javascript - 切换回并强制多个 CSS 元素的优雅方式
- c++ - C++ 创建固定大小的队列
- java - 您如何设置@MockBean 以便@Autowired 字段可以工作?
- javascript - Javascript - 图像尺寸形成多个文件输入
- aws-lambda - 有没有办法在 SNS 传递的 Lambda 函数(Boto3)中读取 EC2InstanceId
- jquery - 结束日期不早于开始日期和日期选择器格式