非常棒的一个JS复选框控制代码,经常在网站上看到的，在很大一堆的选择框面前，如果你选择的其中一个复选框，那么和它相反的选项就会变为灰色，成为不可选
<script>
function f1(chk){
var t = document.getElementById("txt1"); t.disabled = !chk.checked;
}
</script>
<input type=checkbox onclick="f1(this)">
<input type=text id="txt1" disabled="disabled">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>选中复选框，相关类变灰</title>
<script language="JavaScript">
<!--
function selectKind(the){
var obj = the;
var container = document.getElementById("kind_" + obj.name);
for(var i=0;i<container.getElementsByTagName("input").length;i++)
{
container.getElementsByTagName("input")[i].disabled = obj.checked;
}
}
//-->
</script>
</head>
<body>
<input type='checkbox' value="2" name=aa onclick="selectKind(this)">我从事游戏编程
<div id="kind_aa">
<input type='checkbox' value="php" name=aa>PHP
<input type='checkbox' value="asp.net" name=aa>ASP.NET
<input type='checkbox' value="java" name=aa>JAVA
</div>
<input type='checkbox' value="1" name=bb onclick="selectKind(this)">平时不上网
<div id="kind_bb">
<input type='checkbox' value="baidu.com" name=bb>baidu.com
<input type='checkbox' value="163.com" name=bb>163.com
<input type='checkbox' value="codefans.net" name=bb>codefans.net
</div>
</body>
</html>
分享到：
相关推荐
通过以上分析，我们可以看出这段代码有效地实现了用一个主复选框控制其他多个复选框以及关联文本框的功能。这种实现方式不仅简化了用户的操作流程，也提高了表单的可用性和用户体验。对于前端开发者而言，这是一个...
当需要在TreeView中添加可选功能时，复选框的引入就变得尤为重要。本主题将深入探讨“treeview 复选框 三种状态”，以及如何在实际应用中实现和管理这些状态。 1. TreeView 复选框概述： TreeView控件的复选框功能...
然而，在实际应用中，我们可能会遇到一个问题：当实现全选功能后，如果尝试取消选中其中的一项，全选复选框仍然保持选中状态，这显然不符合用户的预期。本文将深入探讨这个问题，并提供解决方案。 首先，我们需要...
反之，如果有一个或多个复选框未选中，通过`$("#submitbtn").attr({"disabled":"disabled"})`添加`disabled`属性，使按钮变为不可点击。 这个示例中，`#submitbtn`按钮的初始状态是被禁用的，因为用户需要至少选中...
4. **Enabled**：控制复选框是否可被用户操作，当设置为FALSE时，复选框将变为灰色，不可点击。 5. **Font**和**Color**：定义字体和背景颜色，可以自定义以适应界面风格。 **事件处理** 复选框控件的典型事件有： ...
2. **切换选中状态**：通过编写交互脚本，可以实现复选框状态的切换，即当点击时从选中变为未选中，反之亦然。 3. **状态改变时事件**：可以利用复选框状态改变时触发的事件来添加更复杂的交互效果。比如，当某个复...
反选则是将所有复选框的状态反转，即已选中的变为未选中，未选中的变为选中。同样，我们遍历所有的复选框，但这次改变它们的`checked`属性为相反的值： ```javascript function invertSelection() { var ...
3. **设置属性**：选中复选框后，可以在“属性”窗口中进行配置。例如，可以更改控件的名称、初始状态、是否允许用户修改等。 4. **关联数据**：为了让复选框的选中状态与单元格的数据关联，可以设置控件的“Linked...
复选框允许用户选择多个选项，各个选项之间不互斥。同样，iOS系统没有内建的复选框控件，需要自定义。我们可以使用`UIButton`或者`UISwitch`来实现。这里以`UIButton`为例： 1. 创建`UIButton`，设置两种状态的图片...
复选框的构造函数可以接受一个可选值和一个可选验证器。值可以是"TRUE"、"FALSE"或布尔值，如果未提供，则默认为"FALSE"。当复选框的状态改变时，会生成对应的XML表示，如： ```xml <field name="FIELDNAME">TRUE ...
在网页设计中，有时我们需要实现一种交互效果，即当用户选中某个复选框时，相关的输入框会变为灰色并变为不可用状态。这个功能可以提高用户体验，因为它可以帮助用户理解哪些选项是相互关联的，避免错误操作。本文将...
在Microsoft Word 2021中，用户可以利用复选框和单选按钮来增强文档的交互性，尤其是在创建表单、问卷调查或指引时。这些元素提供了视觉上的选择方式，使得用户能够轻松地在多个选项中进行选择。 **复选框** 是一种...
本文将详细介绍如何使用JavaScript实现复选框的选中与取消选中功能，并涵盖相关技术点，如DOM操作、事件处理和条件判断。 首先，我们来看一下HTML部分的代码实现。在HTML中，我们定义了一个复选框`allbox`，它用于...
本文介绍了一种JavaScript方法，用于实现点击复选框时使按钮或文本框变灰并设置为不可用，当复选框被选中时则恢复其可用状态。 首先，我们需要了解HTML结构。在示例中，我们有一个包含复选框（`checkbox`）和提交...
当复选框被选中时，`:checked`伪类可以让对应的样式生效，反之则应用`:not(:checked)`的样式。 2. **过渡（Transition）**：可以平滑地改变元素的属性值，在复选框状态切换时产生动画效果。例如，通过设置`...
以上代码创建了圆角矩形的复选框和圆形的单选按钮，当用户选择时，背景颜色会变为蓝色。你可以根据需要调整颜色、大小和边框样式。 对于更复杂的美化，可以利用伪元素如`:before`和`:after`以及CSS3的过渡...
反选功能是指将所有选项的选中状态取反，即已选中的复选框变为未选中，未选中的变为已选中。在提供的代码中，通过为“反选”链接添加点击事件处理函数，使用逻辑非操作符`!`对每个复选框的`checked`属性进行取反...
可以监听`checkbox`事件，并在事件处理函数中取消其他已选中的复选框： ```javascript table.on('checkbox(test)', function(obj){ // obj.data 是当前行数据 // obj.checked 是当前是否选中状态 // obj.type 是...
在某些特定情况下，可能需要禁用复选框，比如在表单提交后，为防止用户修改已提交信息，设计师可以设置复选框为不可用状态。禁用复选框的操作也非常简单，可以直接右键点击并选择“禁用”，或在部件属性面板中进行...