Javascript - les Boutons sélectionner et désélectionner

J'ai quelques boutons ci-dessous dans mon code 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>

Ce que je veux savoir si permet de dire que je veux à l'utilisateur de sélectionner 3 boutons par exemple, si l'utilisateur clique sur un bouton, il va mettre en évidence le bouton de couleur (disons vert), mais l'utilisateur ne peut avoir trois boutons sélectionnés. Si un autre bouton est cliqué, alors que le bouton ne serait pas sélectionnée. Le bouton supplémentaire ne peut être sélectionné que si l'utilisateur ne désigne pas un bouton sélectionné, puis sélectionne le bouton il le souhaite. Cela signifie que seulement 3 boutons peuvent être sélectionnés au maximum.

Ma question est quelles sont les fonctions dans Javacsript peut être utilisé pour être en mesure de le faire?

Merci

C'est possible avec du JS, mais il sera beaucoup plus facile avec jQuery. - Jetez un oeil à l'fonctions addClass, removeClass, hasClass ainsi que sur l'ensemble des sélecteurs $('.my_class') -- api.jquery.com
Le name doit être unique pour chaque bouton.
dans le code Javascript, je l'appelle la réponse[0], la réponse[1], la réponse[2], etc ... donc il me sauve typeing dans getElementsbyName pour chaque nom si chaque nom est unique

InformationsquelleAutor BruceyBandit | 2011-12-01

Tout d'abord, vous devez donner à vos boutons noms différents.

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

Ce que je suggère, c'est l'utilisation de jquery pour modifier la classe de la touche à quelque chose comme answerBtnsSelected quand un bouton est sélectionné, pourront également vous aider avec vos styles css pour mettre en surbrillance le bouton.

Ce que vous pouvez, puis le faire est de créer une fonction qui vérifie le nombre de boutons, avec cette classe, et si c'est trois ou plus, puis de les ignorer ou que ce soit, sinon changer de classe pour la rendre sélectionné.

Ajouté logique pour désélectionner le bouton

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

Ok je vais essayer cela et voir comment il va. Merci

InformationsquelleAutor TBohnen.jnr

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

InformationsquelleAutor Bharathi Dasan

Vous devez vous connecter pour publier un commentaire.