更改组无线电输入的背景颜色
问题我有一个用户填写的表单（基本信息，如您的姓名，电话号码，电子邮件等）。它有一个问题，询问用户是否希望您的建议保持匿名，用户选择是或否。
以下图片就是我所说的：
如果用户未选择任何一个选项并提交表单，则会出现一个警告框，通知用户选择一个。
如果用户未选择其中任何一个，我可以为单个无线电选择着色。我能够将两种无线电选择的颜色都变为红色，如下所示：
以下是检查是否已选择其中任何一个单选按钮的功能：
myOption = -1;
for ( i=0; i < SubmitIdea.Anonymous.length; i++ ) {
if ( SubmitIdea.Anonymous[i].checked ) {
myOption = i;
}
}
if ( myOption == -1 ) {
alert( "Do you wish to remain anonymous?" );
SubmitIdea.Anonymous[0].focus();
SubmitIdea.Anonymous[0].style.backgroundColor = "red";
SubmitIdea.Anonymous[1].focus();
SubmitIdea.Anonymous[1].style.backgroundColor = "red";
return false;
}
但是，我希望围绕“是”和“否”无线电选择的矩形背景边框，而不是单独的。只有在用户提交结果时未选择任何无线电选择时，才会出现此矩形边框。
以下是html：
<form name="SubmitIdea" method="POST" class="h">
<table Border="0" align="center">
<tr>
<td colspan="5"> </td>
</tr>
<cfoutput>
<tr>
<td class="m">Name: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Name" value="" class="a" maxlength="32">
</td>
<td width="50"> </td>
<td class="mm">Today's Date: </font></td>
<td class="mm">#TodaysDt#</td></tr>
</tr>
<tr>
<td class="mm">Department: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Department" value="" class="a" maxlength="32">
</td>
<td width="50"> </td>
<td class="mm">Supervisor Name: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Supervisor" value="" class="a" maxlength="32">
</tr>
<tr>
<td class="mm">Email: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="NomEmail" value="" class="a" maxlength="32" size="25"> <br />
</td>
<td width="50"> </td>
<td class="mm">Phone: </font></td>
<td nowrap="nowrap" class="r">
<input type="text" name="Phone" value="" class="a" maxlength="32">
</tr>
</table>
<table border="0" width="500" align="center">
<tr>
<td class="c" align="center">
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <input type="radio" name="Anonymous" value="Yes"> <strong>Yes</strong> <input type="radio" value="No" name="Anonymous"> <strong>No</strong>
</td>
</tr>
</table>
</cfoutput>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>Please provide a brief summary of your idea:</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="5">
<textarea name="reason" id="textarea1" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxt(this)" onkeydown="limitTxtArea(this); cntTxt(this, 500, 'cnt');" onkeyup="limitTxtArea(this); cntTxt(this, 500, 'cnt');"></textarea>
<span id="cnt" style="color:##FF0000">500</span> character(s) remaining.<br /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>I believe this suggestion will: (check all that apply)</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td class="e"><input type="checkbox" name="Sugg1" value="Improve Productivity/Quality">Improve Productivity/Quality </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg2" value="Improve Process">Improve Process </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg3" value="Increase Revenue">Increase Revenue </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg4" value="Decrease Expenses/Costs">Decrease Expenses/Costs </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg5" value="Improve safety in the workplace">Improve safety in the workplace </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg6" value="Improve Customer Service">Improve Customer Service </font></td>
</tr>
<tr>
<td class="e"><input type="checkbox" name="Sugg7" value="Enhance employee satisfaction / corporate culture">Enhance employee satisfaction/<br>corporate culture </font></td>
<td colspan="4"> </td>
<td class="e"><input type="checkbox" name="Sugg0" value="Other">Other <input type="text" name="OtherSuggest" value="" class="a" maxlength="32"></font></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>Possible challenges to implementation:</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5">
<textarea name="reasontwo" id="textarea2" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxtTwo(this)" onkeydown="limitTxtAreaTwo(this); cntTxtTwo(this, 500, 'cnttwo');" onkeyup="limitTxtAreaTwo(this); cntTxtTwo(this, 500, 'cnttwo');"></textarea>
<span id="cnttwo" style="color:##FF0000">500</span> character(s) remaining.<br /></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5" class="r"><strong>What metrics could be used to track results?</strong></td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="5">
<textarea name="reasonthree" id="textarea3" cols="6" maxlength="500" class="c"
style="background-color: transparent; color:##000000; font-size:14px;"
onFocus="clearTxtThree(this)" onkeydown="limitTxtAreaThree(this); cntTxtThree(this, 500, 'cntthree');" onkeyup="limitTxtAreaThree(this); cntTxtThree(this, 500, 'cntthree');"></textarea>
<span id="cntthree" style="color:##FF0000">500</span> character(s) remaining.<br /><br /></td>
</tr>
</table>
<br />
<table align="center">
<TR>
<TD align="center"><input type="button" value=" Submit " onClick="SubmitMe()" name="SubmitIdeaBtn" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
</td>
</tr>
</table>
</form>
谢谢
更新
以下是我的所作所为：
document.addEventListener("DOMContentLoaded", function(event) {
document.addEventListener("click", function(clickEvent) {
if (clickEvent.target.id == 'check') {
var anonymousInputs = document.getElementsByName('Anonymous');
var anonymousContainer = document.getElementById('anonymousContainer');
var anonymousSelected = Array.prototype.find.call(anonymousInputs,function(radioInput) {return radioInput.checked;});
if (anonymousSelected) {
anonymousContainer.className = '';
}
else {
if (anonymousContainer) {
alert( "Do you wish to remain anonymous?" );
anonymousContainer.className += 'borderedContainer';
}
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0" width="500" align="center">
<tr>
<td class="c" align="center">
<div>
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <span id="anonymousContainer"><input type="radio" name="Anonymous" value="Yes"> <strong>Yes</strong>
<input type="radio" value="No" name="Anonymous">
<strong>No</strong>
</span>
</div>
</td>
</tr>
</table>
<table align="center">
<TR>
<TD align="center"><input id="check" type="button" value=" Submit " onClick="SubmitMe()" name="SubmitIdeaBtn" style="font-size:14px; font-family:Arial, Helvetica, sans-serif">
</td>
</tr>
</table>
所以我不确定我做错了什么。
1 个答案:
答案 0 :(得分：2)
您可以将单选按钮放在容器中（例如span），然后在容器上设置边框。点击标有 check 的按钮后，请参阅下面的示例。
该代码段使用hex value for red，但您可以随意调整为其他值。使用＆＃39; red＆＃39;因为该值可能会在浏览器/操作系统中产生不同的结果。有关更多信息，请参阅MDN color page。
该代码段还使用Array.find()来确定是否检查了任何无线电输入。
注意：
我最初使用document.addEventListener()进行事件委托，并等到DOM加载但是OP使用的是IE 8或更早版本并且遇到了问题，所以我删除了该代码。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
function checkAnonymousSelected(clickEvent) {
var anonymousInputs = document.getElementsByName('Anonymous');
var anonymousContainer = document.getElementById('anonymousContainer');
var anonymousSelected = Array.prototype.find.call(anonymousInputs, function(radioInput) {
return radioInput.checked;
});
if (anonymousSelected) {
anonymousContainer.className = '';
} else {
if (anonymousContainer) {
anonymousContainer.className += 'borderedContainer';
}
}
}
//support IE 8- for OP so do this instead of using document.attachEventListener
//to wait until the DOM is ready and attach event listeners to the buttons...
document.getElementById('check').onclick = checkAnonymousSelected;
document.getElementById('anonymousYes').onclick = checkAnonymousSelected;
document.getElementById('anonymousNo').onclick = checkAnonymousSelected;.borderedContainer {
border: 3px solid #ff0000;
}<div>
Your name will be shared and published along with your suggestion unless you want to remain anonymous. Do you wish to remain anonymous? <span id="anonymousContainer"><input type="radio" name="Anonymous" value="Yes" id="anonymousYes" > <strong>Yes</strong>
<input type="radio" value="No" name="Anonymous" id="anonymousNo" >
<strong>No</strong>
</span>
</div>
<button id="check">check</button>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？