当前位置： 文江博客话题详情

Javascript - 按钮选择和取消选择

发布于 2024-12-19 07:21:44 字数 638 浏览 0 评论 0原文

我的 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 中的哪些函数可以用来做到这一点？

谢谢

原文

I have some buttons below in my 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.

My question is that what functions in Javacsript can be used to be able to do this?

Thank You

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

物价感观 2024-12-26 07:21:45

首先，您必须为按钮指定不同的名称。

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

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 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.');
        }       
    }
}
回复 原文
浅浅淡淡 2024-12-26 07:21:45
<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>

<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>
回复 原文
~没有更多了~

关于作者

栩栩如生

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

梦里南柯

文章 0 评论 0

不将就、

文章 0 评论 0

alipaysp_ZRaVhH1Dn

文章 0 评论 0

青衫儰鉨ミ守葔

文章 0 评论 0

故事未完

文章 0 评论 0

梦晓ヶ微光ヅ倾城

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文