Javascript - Buttons select and unselect

Question

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

This is possible with plain JS, but it will be much easier with jQuery. -- Take a look at the functions addClass, removeClass, hasClass and on the general selectors $('.my_class') -- api.jquery.com — Smamatti
– Smamatti, Commented Dec 1, 2011 at 16:29
in the Javascript I am calling it answer[0], answer[1], answer[2], etc so it saves me typeing in getElementsbyName for each name if each name was unique — BruceyBandit
– BruceyBandit, Commented Dec 1, 2011 at 16:40

TBohnen.jnr · Accepted Answer · 2011-12-01 16:50:17Z

2

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

edited Dec 1, 2011 at 16:50

answered Dec 1, 2011 at 16:34

TBohnen.jnr

5,1191 gold badge22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BruceyBandit Over a year ago

Ok I will try this and see how it goes. Thank You

Bharathi Dasan · Accepted Answer · 2016-12-15 05:19:01Z

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

Collectives™ on Stack Overflow

Javascript - Buttons select and unselect

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related