gpt4 book ai didi

javascript - 如何使用复选框取消选中来清除单选按钮

转载 作者:行者123 更新时间:2023-11-28 08:56:39 24 4
gpt4 key购买 nike

我试图使用取消选中的复选框来清除单选按钮。我能够得到它的 sample 。但你在我的表格中不止一次有相同的设置。我想要有可以跨集合使用的通用方法。

有人可以帮助我吗?这是我的代码。我想为此使用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;
}
}

关于javascript - 如何使用复选框取消选中来清除单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18397480/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com