Javascript - 按钮选择和取消选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8344712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - Buttons select and unselect
提问by BruceyBandit
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. 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 个按钮，那么如果用户单击一个按钮，它将以一种颜色突出显示该按钮（比如说绿色），但用户只能选择三个按钮. 如果单击其他按钮，则不会选择该按钮。仅当用户取消选择所选按钮然后选择他希望的按钮时才能选择附加按钮。这意味着最多只能选择 3 个按钮。
My question is that what functions in Javacsript can be used to be able to do this?
我的问题是可以使用 Javacsript 中的哪些函数来做到这一点？
Thank You
谢谢
回答by TBohnen.jnr
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.
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.
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.');
}
}
}
回答by Bharathi Dasan
<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>
