寻找复选框启用-禁用编码技术:减少JavaScript代码的技巧
Looking for checkbox enable-disable coding techniques: tips to reduce JavaScript code
我会请求帮助在Javascript中编码以下限制,但以更优化的方式,因为我的方式很长。
我想做的是标记2个复选框选项,然后禁用剩余的
<form>
<div>
<input type="checkbox" id="a" name="question1">a) Java <br>
<input type="checkbox" id="b" name="question1">b) C <br>
<input type="checkbox" id="c" name="question1">c) C++ <br>
<input type="checkbox" id="d" name="question1">d) C# <br>
</div>
</form>
这是可以改进的JavaScript代码,它按照我的方式工作,但我不喜欢,我认为它的代码太多了。
addEventListener('load',compruebacheck,false);
function compruebacheck(){
document.getElementById('a').onchange = function() {
if (document.getElementById('b').checked)
{
document.getElementById('c').disabled = this.checked;
document.getElementById('d').disabled = this.checked;
}
if (document.getElementById('c').checked)
{
document.getElementById('b').disabled = this.checked;
document.getElementById('d').disabled = this.checked;
}
if (document.getElementById('d').checked)
{
document.getElementById('b').disabled = this.checked;
document.getElementById('c').disabled = this.checked;
}
};
document.getElementById('b').onchange = function() {
if (document.getElementById('a').checked)
{
document.getElementById('c').disabled = this.checked;
document.getElementById('d').disabled = this.checked;
}
if (document.getElementById('c').checked)
{
document.getElementById('a').disabled = this.checked;
document.getElementById('d').disabled = this.checked;
}
if (document.getElementById('d').checked)
{
document.getElementById('a').disabled = this.checked;
document.getElementById('c').disabled = this.checked;
}
};
document.getElementById('c').onchange = function() {
if (document.getElementById('a').checked)
{
document.getElementById('b').disabled = this.checked;
document.getElementById('d').disabled = this.checked;
}
if (document.getElementById('b').checked)
{
document.getElementById('a').disabled = this.checked;
document.getElementById('d').disabled = this.checked;
}
if (document.getElementById('d').checked)
{
document.getElementById('a').disabled = this.checked;
document.getElementById('b').disabled = this.checked;
}
};
document.getElementById('d').onchange = function() {
if (document.getElementById('a').checked)
{
document.getElementById('b').disabled = this.checked;
document.getElementById('c').disabled = this.checked;
}
if (document.getElementById('b').checked)
{
document.getElementById('a').disabled = this.checked;
document.getElementById('c').disabled = this.checked;
}
if (document.getElementById('c').checked)
{
document.getElementById('a').disabled = this.checked;
document.getElementById('b').disabled = this.checked;
}
};
}
很抱歉给您带来的不便,但我刚开始学习JavaScript,对于我在这门语言中的一点经验,我想不出更好的技术,我会感谢一些替代方法来找到可以使用JavaScript完成的事情。谢谢你。
我想这就是你要找的。
谢谢你的问题。
addEventListener('load',compruebacheck,false);
function compruebacheck() {
document.getElementById('a').onchange = function() { func1(); }
document.getElementById('b').onchange = function() { func1(); }
document.getElementById('c').onchange = function() { func1(); }
document.getElementById('d').onchange = function() { func1(); }
func1();
function func1() {
var count4 =
(document.getElementById('a').checked ? 1 : 0) +
(document.getElementById('b').checked ? 1 : 0) +
(document.getElementById('c').checked ? 1 : 0) +
(document.getElementById('d').checked ? 1 : 0);
document.getElementById('a').disabled = false;
document.getElementById('b').disabled = false;
document.getElementById('c').disabled = false;
document.getElementById('d').disabled = false;
if (count4 == 2) {
if (!document.getElementById('a').checked) { document.getElementById('a').disabled = true; }
if (!document.getElementById('b').checked) { document.getElementById('b').disabled = true; }
if (!document.getElementById('c').checked) { document.getElementById('c').disabled = true; }
if (!document.getElementById('d').checked) { document.getElementById('d').disabled = true; }
}
}
}
相关文章:
- 设置随机数,然后每5秒随机减少一次,直到达到0(javascript)
- 如何在这个JavaScript中减少代码重复
- 函数比javascript中的步进器增加/减少更多
- JavaScript 将“memory”返回为 0,即使我增加或减少它的值
- 需要减少用于获取日期格式的javascript方法代码
- 如何在 JavaScript 中减少两个循环以提高效率
- 如何将一个 JavaScript 数组减少一半
- 如何制作Javascript's减少对数组数组的方法工作
- 如何在JavaScript中,每当一个按钮被另一个变量的值点击时,使变量减少
- Javascript/JQuery中的异步映射/减少
- 通过javascript减少一个框中的金额,并将相同的值动态递增到另一个盒子
- 如何在 javascript 中将多个 if 条件减少为单个缩短条件
- 在 mongo map 中调用外部 javascript 函数(对象)或减少上下文的可能方法
- 减少使用 IntelliJ 自动完成和 Node.js 时建议的 JavaScript 方法的数量
- Javascript:减少到一个数字
- (Javascript)减少和Unflatten数组
- Javascript减少嵌套数组
- 用javascript减少冗余函数
- 使用Javascript减少base64图像内存大小
- AngularJS和Javascript - 减少boilerplace代码