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

稍微扩展kyllo的答案......

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

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

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

如果您已经包含该库，您也可以使用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 span的innerHTML，则需要将onclick事件绑定到该按钮，然后当onClick事件触发时，您将执行document.getElementById("autoAmount").innerHTML = amount.value < / p> 例如，在按钮声明中，您可以添加 onclick="updateAmount()"

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

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

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

检查Javascript中的按钮是否已更改？

2 个答案: