新しいボタンを選択すると、テキストボックスの番号が正しく表示されない

Question

選択されているボタンの数を示すテキストボックスがあります。

私が持っている問題は何が起こることは、ユーザーがボタンを選択し、その後、彼らは行にこれらのボタンを追加することであるということです。次に、次のボタンセットを選択すると、現在選択されているボタンを使用して以前に選択されたボタンを追加することが行われます。例えば

は、ユーザ2つのボタンを選択し、新しいにそれを添加され、ユーザは別の2つのボタンを選択した場合、その後、それは2つのボタンが選択されていることを述べるべきではなく、それは、ボタン選択を述べています。

は今、この理由は、私は同じクラス（.numberAnswerTxt）で複数のテキストボックスを持っているということですので、私はそれが一緒に数字を追加していると思う理由です。だから私の質問は、どのように私は同じクラスでテキストボックスを区別することができますということです。

ユーザがボタンをselctes、次に以前に行ごとに選択されたボタンの量を記載行ごとにテキストボックスがある上に他方のテキストボックスがあります。以下

$('.numberAnswerTxt', context).each(function() { 
     var $this = $(this); 
     var $noofanswersText = $("<input type='text' class='numberAnswerTxt' onkeyup='numberKeyUp(this)' onkeypress='return isNumberKey(event)' onChange='getButtons()'>").attr('name', $this.attr('name')).attr('value', $this.val()) 

     $noofanswers.append($noofanswersText); 
    }); 

はHTML：たびに添加

$('.numberAnswerTxt').val($('.answerBtnsOn:visible').size()); 

以下

新しい行のjQueryのコードである：以下

はテキストボックスで選択されたボタンの数を表示するjQueryのコードであります最初のテキストボックスの：

<input type="text" name="numberAnswer" class="numberAnswerTxt" onkeyup="numberKeyUp(this)" onkeypress="return isNumberKey(event)" onChange="getButtons()" > 

選択したボタンのhtml：

<input class="answerBtns answers" name="answerAName" id="answerA"  type="button" value="A"  onclick="btnclick(this);"/> 
<input class="answerBtns answers" name="answerBName" id="answerB"  type="button" value="B"  onclick="btnclick(this);"/> 
<input class="answerBtns answers" name="answerCName" id="answerC"  type="button" value="C"  onclick="btnclick(this);"/> 
<input class="answerBtns answers" name="answerDName" id="answerD"  type="button" value="D"  onclick="btnclick(this);"/> 
<input class="answerBtns answers" name="answerEName" id="answerE"  type="button" value="E"  onclick="btnclick(this);"/> 
<input class="answerBtns answers" name="answerFName" id="answerF"  type="button" value="F"  onclick="btnclick(this);"/> 
<input class="answerBtns answers" name="answerGName" id="answerG"  type="button" value="G"  onclick="btnclick(this);"/> 

onlickイベントコード：以下

function btnclick(btn) 
{ 
    var context = $(btn).parents('#optionAndAnswer'); 
    if (context.length == 0) { 
     context = $(btn).parents('tr'); 
    } 

    if (context.find(".numberAnswerTxt").val() == "") { 
     alert('You must first enter in the number of answers you require in the textbox above'); 
     return false; 
    } 

    if ($(btn).hasClass("answerBtnsOn")) { 
     $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff"); 
     return false; 
    } 

    var currenttotal = context.find('.answerBtnsOn').length; 
    if (context.find(".numberAnswerTxt").val() <= currenttotal) { 
     alert('You are not allowed beyond the limit of the number of answers you require, deselect other button'); 
     return false; 
    } 

    if ($(btn).hasClass("answerBtnsOff")) { 
     $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn"); 
     return false; 
    } 
} 

は、新しい行が、ユーザは、彼らが選択したボタンの数を送信するたびに追加される機能である。

function insertQuestion(form) { 


    var $tr = $("<tr></tr>"); 
    var $noofanswers = $("<td class='noofanswers'></td>"); 
    var $answer = $("<td class='answer'></td>"); 


    $('.numberAnswerTxt', context).each(function() { 
     var $this = $(this); 
     var $noofanswersText = $("<span class='oneanswer'>Only 1 Answer</span><input type='text' class='numberAnswerTxt' onkeyup='numberKeyUp(this)' onkeypress='return isNumberKey(event)' onChange='getButtons()'>").attr('name', $this.attr('name')).attr('value', $this.val()) 

     $noofanswers.append($noofanswersText); 
    }); 


    $('#optionAndAnswer .answers').each(function() { 
     var $this = $(this); 
     var $newBtn = ''; 
     if($this.is(':visible')){ 
      $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: inline-block;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')); 
     }else{ 
      $newBtn = $("<input class='answerBtnsRow answers' type='button' style='display: none;' onclick='btnclick(this);' />").attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')); 
     } 

     $answer.append($newBtn); 
    }); 


    $tr.append($noofanswers); 
    $tr.append($answer); 

    $('#qandatbl').append($tr); 

} 

Answer 1

私は考えあなたはまた何らかの提出ボタンを持っています。 ボタンをクリックすると、すべてのボタンをデフォルト値にリセットする必要があります。 クラスなど私はそれが間違っていると思います。

はちょうどあなたがofcourseのではない一緒に送信ボタンと、divの中にあなたのボタンを置くと仮定します。 これを試してください。

$('#myDiv input[type=button]').each(function(){ 
//if you dont say what class to remove it will just remove any class on it. 
$(this).removeclass(); 
$(this).addclass('yourDefaultClass'); 

});