html判断如果改变下拉框id="xqdmc"的值为1 , 复选框 name="fenlei"可选的值为11,12,13,14,15,并默认是选中状态,其它值不可选.判断如果改变下拉框id="xqdmc"的值为10, 复选框name="fenlei"重置,可选的值为32,并默认是选中状态,其它值不可选.判断如果改变下拉框id="xqdmc"的值为11, 复选框name="fenlei"重置,可选的值为21,22,并默认是选中状态,其它值不可选
时间: 2023-11-27 21:52:15 浏览: 51
判断复选框的选择状态
5星 · 资源好评率100%
可以使用 JavaScript 来实现这个功能,可以通过获取下拉框的值,然后根据不同的值来对复选框进行操作。
首先,在 HTML 中需要定义好下拉框和复选框,给它们分别设置好 id 和 name。
```html
<select id="xqdmc">
<option value="1">1</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<input type="checkbox" name="fenlei" value="11" checked>11
<input type="checkbox" name="fenlei" value="12" checked>12
<input type="checkbox" name="fenlei" value="13" checked>13
<input type="checkbox" name="fenlei" value="14" checked>14
<input type="checkbox" name="fenlei" value="15" checked>15
```
然后,在 JavaScript 中,可以使用 onchange 事件来监听下拉框的值变化,然后根据不同的值来对复选框进行操作。
```javascript
var xqdmc = document.getElementById("xqdmc");
var fenlei = document.getElementsByName("fenlei");
xqdmc.onchange = function() {
var val = xqdmc.value;
if (val == "1") {
for (var i = 0; i < fenlei.length; i++) {
var v = fenlei[i].value;
if (v == "11" || v == "12" || v == "13" || v == "14" || v == "15") {
fenlei[i].disabled = false;
fenlei[i].checked = true;
} else {
fenlei[i].disabled = true;
fenlei[i].checked = false;
}
}
} else if (val == "10") {
for (var i = 0; i < fenlei.length; i++) {
var v = fenlei[i].value;
if (v == "32") {
fenlei[i].disabled = false;
fenlei[i].checked = true;
} else {
fenlei[i].disabled = true;
fenlei[i].checked = false;
}
}
} else if (val == "11") {
for (var i = 0; i < fenlei.length; i++) {
var v = fenlei[i].value;
if (v == "21" || v == "22") {
fenlei[i].disabled = false;
fenlei[i].checked = true;
} else {
fenlei[i].disabled = true;
fenlei[i].checked = false;
}
}
}
};
```
上面的代码中,首先获取了下拉框和复选框的元素,然后监听了下拉框的 onchange 事件。当下拉框的值发生变化时,根据不同的值来对复选框进行操作。
如果下拉框的值为 1,那么将复选框的值设置为 11,12,13,14,15,并且将其它值设为不可选状态;如果下拉框的值为 10,那么将复选框的值设置为 32,并且将其它值设为不可选状态;如果下拉框的值为 11,那么将复选框的值设置为 21,22,并且将其它值设为不可选状态。
阅读全文