Question

我是javascript的新手并且遇到了问题。我试图从选定的收音机和复选框中获取滚动总数。我已经尝试了一个星期才能做到正确，但我似乎无法弄明白。

<input type="radio" name="size" value="small">
<label>Small &euro;9.99 (perfect for a quick cup)</label>
<br>
<input type="radio" name="size" value="medium">Medium &euro;12.99 (normal days running)
<br>
<input type="radio" name="size" value="large">Large &euro;14.99 (for the 3 p.m slump)
<br>
<input type="radio" name="size" value="extra-Large">Extra-Large &euro;15.99 (for those stressful days)
<br>
</p>
Total
<input type="text" readonly id="total" />
<br/>

上面是html的片段，我需要将值保留为small, medium, large and extra-large以发送到服务器。

我知道我想要什么，但我无法解决语法问题。我正在寻求一些帮助，提前谢谢

Answer 1

<input type="radio" class="radio" onclick="checkStatus" name="size" value="small">
<label>Small &euro;9.99 (perfect for a quick cup)</label>
<br>
<input type="radio" onclick="checkStatus" name="size" class="radio" value="medium">Medium &euro;12.99 (normal days running)
<br>
<input type="radio" onclick="checkStatus" class="radio" name="size" value="large">Large &euro;14.99 (for the 3 p.m slump)
<br>
<input type="radio" onclick="checkStatus" class="radio" name="size" value="extra-Large">Extra-Large &euro;15.99 (for those stressful days)
<br>
</p>
Total
<input type="text" readonly id="total" />

在javascript中写道：

function checkStatus(){
document.getElementsByClassName("radio").forEach(function(item){
      if(this.checked){
        alert(this.value);
      }
});
}

Answer 2

<input type="checkbox" name="size" value="small" price="9.99">
<label>Small &euro;9.99 (perfect for a quick cup)</label>
<br>
<input type="checkbox" name="size" value="medium" price="12.99">Medium &euro;12.99 (normal days running)
<br>
<input type="checkbox" name="size" value="large" price="14.99">Large &euro;14.99 (for the 3 p.m slump)
<br>
<input type="checkbox" name="size" value="extra-Large" price="15.99">Extra-Large &euro;15.99 (for those stressful days)
<br>
</p>
Total
<input type="text" readonly id="total" />
<br/>



$(document).ready(function() {
    $("input").click(function(e){
    var baseVal = parseFloat($("#total").val()) || 0;
    if($(e.target).find(":checked").context.checked)
    $("#total").val(baseVal+parseFloat($(e.target).attr("price")));
    else
    $("#total").val(baseVal-parseFloat($(e.target).attr("price")));
    });

});

小提琴在这里https://jsfiddle.net/1j81w1q5/5/

Answer 3

处理您的HTML不符合标准

 <input type="radio" name="size" value="small" onclick="setYourTotal('Small&euro;9.99 ')" />Small &euro;9.99 (perfect for a quick cup)
      <br>
      <input type="radio" name="size" value="medium" onclick="setYourTotal('Medium &euro;12.99')" />Medium &euro;12.99 (normal days running)
      <br>
      <input type="radio" name="size" value="large" onclick="setYourTotal('Large &euro;14.99')" />Large &euro;14.99 (for the 3 p.m slump)
      <br>
      <input type="radio" name="size" value="extra-Large" onclick="setYourTotal('Extra-Large &euro;15.99')" />Extra-Large &euro;15.99 (for     those stressful days)
      <br>Total
      <input type="text" readonly id="total" />

简易JavaScript功能：

<script>
    function setYourTotal(data) {
        document.getElementById("total").value = data;
    }

</script>

从已选中的单选按钮获取总计

3 个答案: