Javascriptを - 選択と非選択ボタン

私はHTMLで、以下のいくつかのボタンを持っている：私は、ユーザーがクリックした後、場合、私は、ユーザーが、例えば3つのボタンを選択したいと言うことができますかどうかを知りたい何Javascriptを - 選択と非選択ボタン

<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つのボタンしか選択できません。

私の質問は、これを行うためにJavacriptのどの機能を使用できるのですか？

ありがとう

出典

2011-12-01 BruceyBandit

の選択を解除するためにこれは、プレーンJSで可能であるが、それはjQueryを使ってはるかに簡単になります。 - 関数 'addClass'、' removeClass'、 'hasClass'と一般セレクタ' $（ '。my_class'） ' - http://api.jquery.com/ – Smamatti

を参照してください。' name'ボタンごとに一意でなければなりません。 – qw3n

Javascriptで私はそれは私がそれがgetElementsbyNameで各名前がユニークだった場合は入力して保存するので、回答[0]、回答[1]、回答[2]などです – BruceyBandit

まず、ボタンに異なる名前を付ける必要があります。

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

私はボタンがこれを選択したときにanswerBtnsSelectedのようなものに、ボタンのクラスを変更するためにjqueryのを使用している示唆し、また、ボタンを強調するために、あなたのCSSスタイルをお届けします。

あなたができることは、そのクラスのボタンの量をチェックする関数を作成することです。それが3回以上無視された場合は、クラスを変更して選択します。

追加ロジックボタンを

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

出典

2011-12-01 16:34:28

。ありがとうございました – BruceyBandit

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

出典

2016-12-15 05:19:01

Javascriptを - 選択と非選択ボタン

答えて

関連する問題