[英]javascript radio button form
I'm new to javascript and am trying to write a simple script that will open 1 form upon checking a radio button, and another form upon clicking on the second one (none when none is selected).我是 javascript 的新手,我正在尝试编写一个简单的脚本,该脚本将在检查单选按钮时打开一个表单,并在单击第二个表单时打开另一个表单(未选择任何表单时)。 I'm positive the js code is totally wrong as I am a COMPLETE beginner with js, but I used logic and a bit of google to get to this, and I don't know where I went wrong.
我很肯定 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>
This code isn't wrong as such, but it only ever executes once;这段代码本身并没有错,但它只执行一次; when the page loads.
页面加载时。 You instead want the forms to be toggled whenever the inputs are changed.
相反,您希望在输入更改时切换 forms。
To do this, the visibility code is wrapped in a function.为此,可见性代码包含在 function 中。 This function is then registered as an event handler on the
<input>
elements so that it executes whenever the <input>
s change.然后将此 function 注册为
<input>
元素上的事件处理程序,以便在<input>
更改时执行。 Whenever the selected radio button changes, by clicking or by keyboard navigation, an 'input'
event will be triggered on the elements, and then handled by the function.每当所选的广播按钮更改,单击或通过键盘导航,将在元素上触发
'input'
事件,然后由ZC1C425268E68E68385D1AB5074C17A94F14Z处理。
I've also made a few other changes:我还进行了一些其他更改:
id
s since this is specific functionality for a handful of specific elements.id
,因为这是少数特定元素的特定功能。<form>
elements for better semantics.<form>
元素以获得更好的语义。 All forms must be wrapped in a <form>
element at some level.<form>
元素中。.java
to .js
– JavaScript and Java are (unintuitively) unrelated..java
更改为.js
– JavaScript 和 Java (不直观地)不相关。name
on the <input>
s to better describe their role.<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);
According to @Mehdi Brillaud's answer here: https://stackoverflow.com/a/42488571/13695248 , you could try this with JQuery:根据@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>
Is this what you want?这是你想要的吗?
For modern browsers:- (Not recommend)对于现代浏览器:-(不推荐)
<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>
Update更新
Recommend推荐
<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.