[英]javascript radio button form
我是 javascript 的新手,我正在尝试编写一个简单的脚本,该脚本将在检查单选按钮时打开一个表单,并在单击第二个表单时打开另一个表单(未选择任何表单时)。 我很肯定 js 代码是完全错误的,因为我是 js 的完整初学者,但我使用逻辑和一些谷歌来解决这个问题,我不知道我哪里出错了。
var ele1 = document.getElementsByClassName("form1"); var ele2 = document.getElementsByClassName("form2"); if (document.getElementById('button1').checked) { ele1.style.display = "block"; } if (document.getElementById('button2').checked) { ele2.style.display = "block"; }
.form1 { display: none; background-color: red; width: 100px; height: 100px; }.form2 { display: none; background-color: blue; width: 100px; height: 100px; }
<input type="radio" name="role" id="button1"> <input type="radio" name="role" id="button2"> <div class="form1"> </div> <div class="form2"> </div> <script src="/scripts/form.java"></script>
这段代码本身并没有错,但它只执行一次; 页面加载时。 相反,您希望在输入更改时切换 forms。
为此,可见性代码包含在 function 中。 然后将此 function 注册为<input>
元素上的事件处理程序,以便在<input>
更改时执行。 每当所选的广播按钮更改,单击或通过键盘导航,将在元素上触发'input'
事件,然后由ZC1C425268E68E68385D1AB5074C17A94F14Z处理。
我还进行了一些其他更改:
id
,因为这是少数特定元素的特定功能。<form>
元素以获得更好的语义。 所有 forms 都必须包含在某个级别的<form>
元素中。.java
更改为.js
– JavaScript 和 Java (不直观地)不相关。<input>
上的name
以更好地描述它们的角色。<input type="radio" name="formID" id="input1">
<input type="radio" name="formID" id="input2">
<form id="form1">
<!-- fields -->
</form>
<form id="form2">
<!-- fields -->
</form>
<script src="/scripts/form.js"></script>
// form.js
// Get references to important elements.
var elInput1 = document.getElementById('input1');
var elInput2 = document.getElementById('input2');
var elForm1 = document.getElementById('form1');
var elForm2 = document.getElementById('form2');
// Define an event handler function.
function updateFormVisibility(event) {
var elSelectedInput = event.target;
if (elSelectedInput.id === 'input1') {
elForm1.style.display = 'block';
elForm2.style.display = '';
} else {
elForm1.style.display = '';
elForm2.style.display = 'block';
}
}
// Register the function as a handler for any `'input'` events that occur on the
// two radio button elements.
elInput1.addEventListener('input', updateFormVisibility);
elInput2.addEventListener('input', updateFormVisibility);
根据@Mehdi Brillaud 在这里的回答: https://stackoverflow.com/a/42488571/13695248 ,你可以用 JQuery 试试这个:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label><input type="radio" class="form-switch" name="colorCheckbox" value="red" data-id="a" checked> red</label> <label><input type="radio" class="form-switch" name="colorCheckbox" value="green" data-id="b"> green</label> <label><input type="radio" class="form-switch" name="colorCheckbox" value="blue" data-id="c"> blue</label> <div class="form form-a active"> form a </div> <div class="form form-b"> form b </div> <div class="form form-c"> form c</div>
.form { display: none; }.form.active { display: block }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.form-switch').on('change', function() { $('.form').removeClass('active'); var formToShow = '.form-' + $(this).data('id'); $(formToShow).addClass('active'); }); }); </script>
这是你想要的吗?
对于现代浏览器:-(不推荐)
<input type="radio" name="role" id="button1" onchange = "form1.style.display ='block'; form2.style.display ='none'">
<input type="radio" name="role" id="button2" onchange = "form1.style.display ='none'; form2.style.display ='block'">
<div class="form1" id ="form1" style="display:none">Form 1
</div>
<div class="form2" id ="form2" style="display:none">Form 2
</div>
<script src="/scripts/form.js"></script>
更新
推荐
<input type="radio" name="role" id="button1" onchange = "Show('form1')">
<input type="radio" name="role" id="button2" onchange = "Show('form2')">
<div class="form1" id ="form1" style="display:none">Form 1
</div>
<div class="form2" id ="form2" style="display:none">Form 2
</div>
<script src="/scripts/form.js"></script>
<script>
var selected = document.getElementById("form1");
function Show(curr_sel) {
selected.style.display = "none";
selected = document.getElementById(curr_sel);
selected.style.display = "block";
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.