Question

我的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>

如果我想让用户选择3个按钮，我想知道，然后如果用户点击按钮，它会突出显示颜色的按钮（让我们说绿色），但用户只能拥有选择了三个按钮。如果单击其他按钮，则不会选择该按钮。只有当用户取消选择所选按钮然后选择他想要的按钮时，才能选择附加按钮。这意味着最多只能选择3个按钮。

我的问题是Javacsript中的哪些功能可以用来做到这一点？

谢谢

Answer 1

首先，你必须给你的按钮命名不同。

<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);"/>

我建议使用jquery将按钮的类更改为answerBtnsSelected，当选择一个按钮时，也会帮助你用css样式突出显示按钮。

然后您可以创建一个函数来检查该类的按钮数量，如果它是三个或更多，则忽略或其他，否则更改类以使其选中。

添加逻辑以取消选择按钮

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.');
        }       
    }
}

Answer 2

<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>

Javascript - 按钮选择和取消选择

2 个答案: