Javascript 如何在文本框中显示数字以跟踪打开的按钮数

以下是只读文本框的代码：

<td>
<input type="text" name="numberAnswer" class="numberAnswerTxt answertxt" id="mainNumberAnswerTxt" onChange="getButtons()" readonly="readonly" >
</td>

我一直试图在这个函数中做的是，如果用户打开了一个按钮，它应该在文本框中添加数字。例如，假设所有按钮都已关闭，如果我打开按钮“B”，则当一个按钮打开时，文本框应显示文本框中的数字1；如果我打开按钮“E”，则当两个按钮现在打开时，文本框中应显示“2”。同样，如果我关闭按钮“E”，则应返回显示“1”在文本框中，只有按钮“B”处于打开状态。换句话说，我想记录有多少按钮被打开

我如何才能做到这一点，因为当我打开按钮时，文本框中没有显示任何内容

以下是应用程序的详细信息：

---

打开应用程序时，只需单击“打开网格”链接并选择一个网格按钮，当字母按钮出现时，然后单击按钮打开和关闭，因为您可以看到文本框中没有显示任何内容。

计算已打开或关闭的按钮数的行永远不会被点击，因为您有

返回false设置按钮类之后。试试这个：

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

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

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

    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : '');

    return false;
}

您可能还想尝试使用jQuery的方法。它就是为这类事情而设计的。
这个.toggleClass（）方法会是“$（btn）.toggleClass（“answerBtnsOff”）”；”$切换类（“应答器”）；````？这是好的，设法弄明白了toggleClass方法，这非常有效，谢谢：）我能问你一个问题吗。它不在演示中，但如果我有两个按钮，“True”和“False”，在这种情况下，只允许关闭一个按钮，如果我打开“True”按钮，然后我想打开“False”按钮，警报验证将显示，说明只应打开一个按钮，但toggle类是否表示“False”按钮仍将打开，还是会阻止其打开？请查看我的更新代码以及警报验证和toggleClass@user1490145与其在用户选择太多按钮时责骂用户，更好的设计应该是首先防止他们选择太多按钮。单击其中一个“真/假”按钮后，禁用另一个按钮，使其无法被选中。@user1490145顺便说一句，如果我的答案有助于解决您的问题，请向上投票并将其标记为已接受的答案，我们将不胜感激。将您的问题标记为已回答有助于其他可能有类似问题的人更快地找到解决方案。：）如果我想不出答案，我会给你的答案打上记号，并提出一个新的问题，回答对错：）
function btnclick(btn)
{
    var context = $(btn).parents('#optionAndAnswer');
    if (context.length == 0) {
        context = $(btn).parents('tr');
    }

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

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

    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : '');

}

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

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

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

    $('.answertxt', context).val(context.find('.answerBtnsOn').length > 0 ? context.find('.answerBtnsOn').length : '');

    return false;
}