如何使用复选框取消选中来清除单选按钮
how to clear the radio buttons using check box un check
我试图使用复选框取消选中来清除单选按钮。我可以得到它的样本。但在我的表单中,同一个集合不止一次。我想有一个可以在集合中使用的泛型方法。
有人能帮我吗?这是我的密码。我想为此使用java脚本。
<html>
<head>
<script language="JavaScript">
function loopForm(form) {
var cbResults = 'Checkboxes: ';
var radioResults = 'Radio buttons: ';
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'checkbox') {
if (form.elements[i].checked == true) {
cbResults += form.elements[i].value + ' ';
}
}
if (form.elements[i].type == 'radio') {
if (form.elements[i].checked == true) {
radioResults += form.elements[i].value + ' ';
}
}
}
document.getElementById("cbResults").innerHTML = cbResults;
document.getElementById("radioResults").innerHTML = radioResults;
}
function loopForm123(form) {
for (var i = 0; i < form.elements.length; i++ ) {
if (form.elements[i].type == 'checkbox') {
if (form.elements[i].checked == true) {
alert('insde for loop1');
form.elements[i].checked == false;
alert('insde for loop3');
}
}
if (form.elements[i].type == 'radio') {
if (form.elements[i].checked == true) {
alert('insde for loop2');
form.elements[i].checked == false;
alert('insde for loop4');
}
}
}
}
</script>
<body>
<form name="thisForm">
I like to program in:<p>
<input type="checkbox" value="PHP" >PHP<p>
<input type="checkbox" value="Perl">Perl<p>
<input type="checkbox" value="Ruby">Ruby<p>
<input type="checkbox" value="ASP">ASP<p>
<hr>
I like to eat:<p>
<input type="radio" value="Snickers" name="candy" >Snickers<p>
<input type="radio" value="Hershey's" name="candy">Hershey's<p>
<input type="radio" value="M&M's" name="candy">M&M's<p>
<input type="radio" value="Nerds" name="candy">Nerds<p>
<hr>
I like to drink:<p>
<input type="radio" value="Coke" name="drink" >Coke<p>
<input type="radio" value="Gatorade" name="drink">Gatorade<p>
<input type="radio" value="Pepsi" name="drink">Pepsi<p>
<input type="radio" value="Milk" name="drink">Milk<p>
<br>
<input type="checkbox" value="Submit" onclick="loopForm123(document.thisForm);">
</form>
<p>
<div id="cbResults"></div>
<div id="radioResults"></div>
</body>
</html>
JSFiddle:http://jsfiddle.net/zzrVN/
为什么不能使用重置按钮来清除表单?
<input type="reset" value="Reset Form" />
但为了回答你的问题,如果你能使用jQuery,那么你可以很容易地做到这一点:
jQuery方法:http://jsfiddle.net/zzrVN/2/
$(document).ready( function() {
$('#clearCheckboxes').click( function() {
$('[name="thisForm"] input:checkbox').removeAttr('checked');
$('[name="thisForm"] input:radio').removeAttr('checked');
});
});
要使用jQuery,您只需要在文档中添加一个脚本标记:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
但是,如果您不想使用jQuery,那么纯JavaScript解决方案将类似于:
var inputItems = document.getElementsByTagName('input');
for (var i=0;i<inputItems.length;i++) {
inputItems[i].checked = false;
}
编辑:::
添加了此特定于复选框的代码。
function resetRadioButtonValuesforCheckbox(checkbox) {
var inputItems = document.getElementsByTagName('input');
if(! checkbox.checked){
for (var i=0;i<inputItems.length;i++) {
inputItems[i].checked = false;
}
}
此代码取消选中所有单选按钮
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
$("input[type=radio]").prop("checked", false);
这段代码属于jquery,所以要运行这段代码,您需要包含jquery库。
相关文章:
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- 互斥单选按钮和相应的输入字段
- 用于选择MVC3中单选按钮值的JavaScript
- 如何获取单选按钮的多个实例的选定单选按钮值
- 退出视图后,“余烬”单选按钮永远不会被清除
- 获取表单域以在选择单选按钮时清除
- 通过单击单选按钮清除所有选项选择条目
- 选择相反的单选按钮时清除复选标记和下拉列表
- 用于清除/取消选择单选按钮列表中的项目的 Javascript
- 如何在选择单选按钮时清除文本字段中的文本
- 在选择任何其他单选按钮时清除文本框
- 如何使用复选框取消选中来清除单选按钮
- 单选按钮可清除文本框
- 更改单选按钮选择时清除复选框
- jQuery datatable清除header中的单选按钮
- 如何清除单选按钮
- 清除已提交表单的单选按钮