Javascript - 按钮选择和取消选择
[英]Javascript - Buttons select and unselect
问题描述
I have some buttons below in my HTML: 
我的HTML下面有一些按钮：
<p>
<input class="answerBtns" name="answer" type="button" value="A" />
<input class="answerBtns" name="answer" type="button" value="B" />
<input class="answerBtns" name="answer" type="button" value="C" />
<input class="answerBtns" name="answer" type="button" value="D" />
<input class="answerBtns" name="answer" type="button" value="E" />
</p>
What I want to know if lets say I want the user to select 3 buttons for example, then if the user clicks on a button, it will highlight the button in a color (lets say green) but the user can only have three buttons selected. 我想知道的是，如果我想让用户选择3个按钮，那么如果用户点击一个按钮，它会突出显示一个颜色的按钮（说绿色），但用户只能选择三个按钮。 If an additional button is clicked then that button would not be selected. 如果单击其他按钮，则不会选择该按钮。 The additional button can only be selected if the user unselects a selected button and then selects the button he wishes. 只有当用户取消选择所选按钮然后选择他想要的按钮时，才能选择附加按钮。 This means that only 3 buttons can be selected at maximum. 这意味着最多只能选择3个按钮。
My question is that what functions in Javacsript can be used to be able to do this? 我的问题是Javacsript中的哪些函数可以用来做到这一点？
Thank You 谢谢
2 个解决方案
解决方案1
2 已采纳 2011-12-01 16:34:28
Firstly, you have to give your buttons different names. 首先，您必须为您的按钮指定不同的名称。
<input class="answerBtns" id="answer1" type="button" value="A" onclick="changeClass(this.id);" />
<input class="answerBtns" id="answer2" type="button" value="B" onclick="changeClass(this.id);"/>
<input class="answerBtns" id="answer3" type="button" value="C" onclick="changeClass(this.id);"/>
<input class="answerBtns" id="answer4" type="button" value="D" onclick="changeClass(this.id);"/>
<input class="answerBtns" id="answer5" type="button" value="E" onclick="changeClass(this.id);"/>
What I would suggest is using jquery to change the class of the button to something like answerBtnsSelected when a button is selected this, will also help you with your css styles to highlight the button. 我建议使用jquery将按钮的类更改为answerBtnsSelected，当选择一个按钮时，也会帮助你用css样式突出显示按钮。
What you can then do is create a function that checks the amount of buttons with that class, and if it's three or more then ignore or whatever, else change the class to make it selected. 然后你可以做的是创建一个函数来检查该类的按钮数量，如果它是三个或更多，则忽略或其他，否则更改类以使其被选中。
Added logic to unselect button 添加了取消选择按钮的逻辑
function changeClass(id)
{
if ($('#' + id).hasClass('answerBtnsSelected'))
$('#' + id).removeClass('answerBtnsSelected');
else
{
if ($('.answerBtnsSelected').length < 3)
{
$('#' + id).addClass('answerBtnsSelected');
}
else
{
alert('Only three buttons can be selected.');
}
}
}
解决方案2
0 2016-12-15 05:19:01
<html>
<head>
<style type="text/css">
.answerBtnsOff
{
BACKGROUND-COLOR: #ffffff;
BORDER-BOTTOM: #666666 1px solid;
BORDER-LEFT: #666666 1px solid;
BORDER-RIGHT: #666666 1px solid;
BORDER-TOP: #666666 1px solid;
COLOR: #c;
FONT: 11px Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
}
.answerBtnsOn
{
BACKGROUND-COLOR: GREEN;
BORDER-BOTTOM: #666666 1px solid;
BORDER-LEFT: #666666 1px solid;
BORDER-RIGHT: #666666 1px solid;
BORDER-TOP: #666666 1px solid;
COLOR: #ffffff;
FONT: 11px Verdana,Arial,Helvetica,sans-serif;
font-weight:bold;
}
</style>
<script lang=javascript>
var currenttotal=0;
function getButtons()
{
document.getElementById("answerA").class="answerBtnsOff";
document.getElementById("answerA").setAttribute("class","answerBtnsOff");
document.getElementById("answerA").setAttribute("className","answerBtnsOff");
document.getElementById("answerB").class="answerBtnsOff";
document.getElementById("answerB").setAttribute("class","answerBtnsOff");
document.getElementById("answerB").setAttribute("className","answerBtnsOff");
document.getElementById("answerC").class="answerBtnsOff";
document.getElementById("answerC").setAttribute("class","answerBtnsOff");
document.getElementById("answerC").setAttribute("className","answerBtnsOff");
document.getElementById("answerD").class="answerBtnsOff";
document.getElementById("answerD").setAttribute("class","answerBtnsOff");
document.getElementById("answerD").setAttribute("className","answerBtnsOff");
document.getElementById("answerE").class="answerBtnsOff";
document.getElementById("answerE").setAttribute("class","answerBtnsOff");
document.getElementById("answerE").setAttribute("className","answerBtnsOff");
currenttotal=0;
}
function btnclick(btn)
{
if(document.getElementById("numberDropId").value=="")
{
alert('Select option');
return false;
}
if (btn.class=="answerBtnsOn")
{
btn.class="answerBtnsOff";
btn.setAttribute("class","answerBtnsOff");
btn.setAttribute("className","answerBtnsOff");
currenttotal--;
return false;
}
if(document.getElementById("numberDropId").value==currenttotal)
{
alert('Not allowed beyond limit, deselect other button');
return false;
}
if (btn.class=="answerBtnsOff")
{
btn.class="answerBtnsOn";
btn.setAttribute("class","answerBtnsOn");
btn.setAttribute("className","answerBtnsOn");
currenttotal++;
return false;
}
}
</script>
</head>
<body>
<p>
<select name="numberDropId" id="numberDropId" onchange="getButtons()" >
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</p>
<p>
<input class="answerBtnsOff" name="answerA" id="answerA" type="button" value="A" onclick='javascript:btnclick(this);' />
<input class="answerBtnsOff" name="answerB" id="answerB" type="button" value="B" onclick='javascript:btnclick(this);' />
<input class="answerBtnsOff" name="answerC" id="answerC" type="button" value="C" onclick='javascript:btnclick(this);' />
<input class="answerBtnsOff" name="answerD" id="answerD" type="button" value="D" onclick='javascript:btnclick(this);' />
<input class="answerBtnsOff" name="answerE" id="answerE" type="button" value="E" onclick='javascript:btnclick(this);' />
</p>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.