一、js多选框选中与取消
在网页开发中，常用的表单控件之一是多选框。一般情况下，我们使用鼠标点击多选框来进行选中和取消选中操作。但是，在某些情境下，我们需要通过js代码来进行多选框的选中和取消。下面是示例代码：
<input type="checkbox" id="checkbox1" name="checkbox1" />
<input type="checkbox" id="checkbox2" name="checkbox2" />
<input type="checkbox" id="checkbox3" name="checkbox3" />
<script>
// js代码
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
checkbox1.checked = true; //选中
checkbox2.checked = false; //取消选中
</script>
以上代码中，我们使用了getElementById方法获取了三个多选框的引用，然后在js代码中对其进行了选中和取消选中操作。checkbox.checked属性代表该多选框是否被选中，true代表选中，false代表未选中。
二、js多选框默认选中事件
在实际开发中，我们可能需要对多选框进行默认选中操作。在html中，我们可以通过在多选框的input标签中添加checked属性来进行默认选中。下面是示例代码：
<input type="checkbox" id="checkbox1" name="checkbox1" checked />
<input type="checkbox" id="checkbox2" name="checkbox2" />
<input type="checkbox" id="checkbox3" name="checkbox3" checked />
<script>
// js代码
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
// 选中和取消选中代码同上
</script>
上面代码中，我们在checkbox1和checkbox3多选框的input标签中添加了checked属性，表示这两个多选框默认选中。通过js代码获取到多选框引用后，对其进行选中和取消选中操作，与前面示例代码中一致。
三、js获取多选框选中的值
在表单提交时，我们可能需要获取多选框选中的值，这个时候我们需要用到js。下面是示例代码：
<input type="checkbox" id="checkbox1" name="fruit" value="apple" />
<label for="checkbox1">苹果</label>
<input type="checkbox" id="checkbox2" name="fruit" value="banana" />
<label for="checkbox2">香蕉</label>
<input type="checkbox" id="checkbox3" name="fruit" value="orange" />
<label for="checkbox3">橘子</label>
<button onclick="getChecked()">获取选中值</button>
<script>
// js代码
function getChecked() {
var checkbox = document.getElementsByName("fruit");
var result = [];
for (var i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked) {
result.push(checkbox[i].value);
}
}
alert(result.join(",")); //输出选中结果
}
</script>
上面代码中，我们通过getElementsByTagName方法获取了name属性为"fruit"的多选框，并使用for循环来遍历每个多选框，如果该多选框被选中，则将其value值加入到result数组中。最后使用alert函数输出选中结果。
四、js控制复选框取消选中
我们可能需要在某些情况下，控制某个多选框不被选中。下面是示例代码：
<input type="checkbox" id="checkbox1" name="checkbox1" />
<input type="checkbox" id="checkbox2" name="checkbox2" />
<input type="checkbox" id="checkbox3" name="checkbox3" />
<button onclick="uncheck()">取消选中</button>
<script>
// js代码
function uncheck() {
var checkbox2 = document.getElementById("checkbox2");
checkbox2.checked = false;
}
</script>
上面代码中，我们使用getElementById方法获取了checkbox2的引用，并在js代码中对其进行了取消选中的操作。
五、js单选框取消选中
与多选框不同，单选框一次只能选中一个选项，在选中一个选项之后，其他选项应该自动取消选中。下面是示例代码：
<input type="radio" name="gender" value="male" checked />
<label>男</label>
<input type="radio" name="gender" value="female" />
<label>女</label>
<script>
// js代码
var radio = document.getElementsByName("gender");
for (var i = 0; i < radio.length; i++) {
radio[i].onclick = function() {
for (var j = 0; j < radio.length; j++) {
if (radio[j] != this) {
radio[j].checked = false;
}
}
}
}
</script>
上面代码中，我们使用getElementsByName方法获取了name属性为"gender"的两个单选框，然后使用for循环遍历每个单选框。在遍历的过程中，我们给每个单选框绑定了一个onclick事件，当该单选框被点击时，使用for循环遍历除该单选框之外的其他单选框，并将其取消选中。
六、js获取多选框是否选中
在某些情况下，我们需要通过js代码来获取多选框的选中状态，判断其是否被选中。下面是示例代码：
<input type="checkbox" id="checkbox1" name="checkbox1" checked />
<input type="checkbox" id="checkbox2" name="checkbox2" />
<input type="checkbox" id="checkbox3" name="checkbox3" />
<button onclick="getStatus()">获取状态</button>
<script>
// js代码
function getStatus() {
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
alert(checkbox1.checked); // true
alert(checkbox2.checked); // false
alert(checkbox3.checked); // false
}
</script>
上面代码中，我们使用getElementById方法获取了三个多选框的引用，并在js代码中通过checkbox.checked属性来获取多选框的状态。
七、js设置多选框不选中
有时候，我们需要通过js代码来将多选框恢复到未选中状态。下面是示例代码：
<input type="checkbox" id="checkbox1" name="checkbox1" checked />
<input type="checkbox" id="checkbox2" name="checkbox2" checked />
<input type="checkbox" id="checkbox3" name="checkbox3" checked />
<button onclick="uncheckAll()">全部取消</button>
<script>
// js代码
function uncheckAll() {
var checkbox = document.getElementsByName("checkbox");
for (var i = 0; i < checkbox.length; i++) {
checkbox[i].checked = false;
}
}
</script>
上面代码中，我们使用getElementsByName方法获取了name属性为"checkbox"的所有多选框，并使用for循环遍历每个多选框，将其设置为未选中状态。
八、js取消checkbox选中
除了多选框和单选框，我们还有一种常用的表单控件是checkbox，它也需要经常进行选中和取消选中的操作。下面是示例代码：
<input type="checkbox" id="checkbox" />
<button onclick="uncheck()">取消选中</button>
<script>
// js代码
function uncheck() {
var checkbox = document.getElementById("checkbox");
checkbox.checked = false;
}
</script>
上面代码中，我们使用getElementById方法获取了checkbox的引用，并在js代码中将其设置为未选中状态。
九、js取消radio选中
和多选框一样，我们也需要对单选框进行取消选中操作。下面是示例代码：
<input type="radio" id="radio1" name="radio" value="male" checked />
<label for="radio1">男</label>
<input type="radio" id="radio2" name="radio" value="female" />
<label for="radio2">女</label>
<button onclick="uncheck()">取消选中</button>
<script>
// js代码
function uncheck() {
var radio = document.getElementsByName("radio");
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
radio[i].checked = false;
}
}
}
</script>
上面代码中，我们使用getElementsByName方法获取了name属性为"radio"的所有单选框，并使用for循环遍历每个单选框，将其设置为未选中状态。
