检查按钮是否在 Javascript 中发生了变化？

Question

我试图弄清楚如何让我的 Javascript 代码检查是否选择了按钮。如果有，我想显示按钮的值。

我有以下 HTML：

<li class="control-group">
        <label for="amount" class="control-label">Select an amount</label>
        <div class="controls">
            <div class="btn-group radioButtons amountButtons" data-toggle="buttons-radio">
                @if (Model.PresetValues.Count > 0){
                     foreach (int value in Model.PresetValues) {
                        <button type="button" data-value="@value" class="btn @(Model.chargeViewModel.ChargeAmount == value ? "active" : "")">$@value</button>
                     } 
                }                   
                <button type="button" data-value="other" class="btn toggleDiv toggleOnce" data-toggle-id="#manualAmount">Other</button>
            </div>               
            <input type="hidden" class="radioHidden validate required validateAmount" value="" id="amount" name="ChargeAmount">


        </div>
        <div class="controls hide resize" id="manualAmount">
            <div class="input-prepend input-append">
                <button class="btn minus" type="button"><i class="icon-minus"></i></button>
                <input class="span2 plusminus" data-max="100" data-min="10" data-increment="5" data-value="25" id="manualAmountInput" type="text" value="$25" disabled>
                <button class="btn plus" type="button"><i class="icon-plus"></i></button>
            </div>
        </div>
    </li>

这是我的两个按钮选项，我想编辑以下跨度

<span class="help-block">Your card will automatically reload $<span id="autoAmount">0</span> when your balance is lower than your reload threshold.</span>

我有以下脚本，我被认为会在单击时更改跨度的值，但我很难将它们连接在一起。

<script>
    javascript: void (document.getElementById("autoAmount").innerHTML = amount);
</script>

如果有人有任何建议或想法，将不胜感激。 谢谢！

Answer 1

稍微扩展一下kylo的答案...

首先，您需要将点击事件绑定到您的按钮。您可以将其设置为 onClick 属性：

<input type="button" onClick="captureAmount(e); return false;">

在 captureAmount 中包含“e”会将点击事件本身传递给我们的函数，我们可以使用它来确定单击了哪个按钮（如果您在多个地方使用此函数）。

如果您已包含该库，您也可以使用 jQuery 将函数一次附加到页面上的每个按钮。

$('input[type=button]').click(captureAmount(e));

或者，指定具有特定类的按钮..

$('input.amountBtns').click(captureAmount(e));

你的函数可能看起来像这样：

function captureAmount(e){
  var clicked = e.target
  ,   clickedAmount = clicked.value
  ,   display = document.getElementById("autoAmount")
  ;

  display.innerHTML = clickedAmount;
}

Answer 2

如果您希望在单击按钮时更改 autoAmount 范围的 innerHTML，则需要将 onclick 事件绑定到该按钮，然后当 onClick 事件触发时，您将执行document.getElementById("autoAmount").innerHTML = amount.value

例如，在按钮声明中，您可以添加 onclick="updateAmount()"

然后在脚本标签中声明一个由 onclick 事件调用的 javascript 函数：

    function updateAmount(){
        document.getElementById("autoAmount").innerHTML = document.getElementById("amount").value
    }

（请记住，您的“金额”输入框是隐藏的。）