Javascript,对象之间的依赖关系

y0u0uwnf  于 2023-01-11  发布在  Java
关注(0)|答案(2)|浏览(140)

在我的表单上,我有checkbox1、checkbox2、checkbox3、textbox1和textbox2。
默认情况下,只有checkbox1处于活动状态。当我单击(选中)checkbox1时,checkbox2将被激活。当我单击(选中)checkbox2时,checkbox3将被激活。最后,当我选中checkbox3时,textbox1和textbox2将被激活。
当我取消选中checkbox3时,两个文本框都被禁用。处于取消选中状态的Checkbox2禁用checkbox3。
如何维护这些对象之间的依赖关系?例如,当我取消选中复选框1时,复选框2和3以及两个文本框都应禁用。

svujldwt

svujldwt1#

如果您使用DOM元素作为复选框和输入框,那么我建议您在复选框和输入框元素中添加一个用户定义的属性。

<input type="checkbox" name="vehicle" value="Bike"  dependents="inputbox1,inputbox2" />

单击后,您可以在eventhandler中访问此属性,如

arrDependents = element.getAttribute("dependents").split(",");

这将以数组的形式返回所有依赖ID。

icnyk63a

icnyk63a2#

这里是一个可能的解决方案。在这种情况下,我让它取消选中复选框时,他们被禁用。如果这不是想要的,根据需要更改:

    • 超文本标记语言:**
Checkbox 1: <input id="checkbox1" type="checkbox" onchange="onCheckbox1Changed();"/>
Checkbox 2: <input id="checkbox2" type="checkbox" onchange="onCheckbox2Changed();"/>
Checkbox 3: <input id="checkbox3" type="checkbox" onchange="onCheckbox3Changed();"/>
Textbox 1: <textarea id="textbox1"></textarea>
Textbox 2: <textarea id="textbox2"></textarea>
<script type="text/javascript">
    //Initialize checkboxes
    onCheckbox1Changed();
    onCheckbox2Changed();
    onCheckbox3Changed();
</script>
    • 脚本语言**
var onCheckbox1Changed = function(checkbox){
    var checkbox1 = document.getElementById('checkbox1');
    var checkbox2 = document.getElementById('checkbox2');

    if(checkbox1.checked){
        checkbox2.disabled = false;
    } else {
        if(checkbox2.checked){
            checkbox2.click();
        }
        checkbox2.disabled = true;
    }
};

var onCheckbox2Changed = function(checkbox){
    var checkbox2 = document.getElementById('checkbox2');
    var checkbox3 = document.getElementById('checkbox3');

    if(checkbox2.checked){
        checkbox3.disabled = false;
    } else {
        if(checkbox3.checked){
            checkbox3.click();
        }
        checkbox3.disabled = true;
    }
};

var onCheckbox3Changed = function(checkbox){
    var checkbox3 = document.getElementById('checkbox3');
    var textbox1 = document.getElementById('textbox1');
    var textbox2 = document.getElementById('textbox2');

    var disabled = !(checkbox3.checked);
    textbox1.disabled = disabled;
    textbox2.disabled = disabled;
};

相关问题