如果复选框是否被选中，则实时更新值

live update value if checkbox is checked or not

本文关键字：实时更新 复选框 是否 如果      更新时间：2023-09-26

我正试图根据是否选中复选框来更新文本框。多亏了这篇文章，我得到了一个文本框工作良好，但我不能得到一个复选框来更新值。我错过了什么?

<html>
<head>
    <title>sum totals</title>
    <script type="text/javascript">
        function calculate(t){
        var j = document.getElementById("output");
        var rege = /^[0-9]*$/;
        if ( rege.test(t.tons.value) ) {
            var treesSaved = t.tons.value * 17;
            j.value = treesSaved;
        }
        else
            alert("Error in input");
        }
  $('input[name="selectedItems1"]').click(function(){
    var j = document.getElementById("output");
    if (this.checked) {
      j.value=j.value+300
    }else{
      j.value=j.value-300
    }
  });
    </script>
</head>
<body>
    <form>
        <input type="text" placeholder="Tons" id="tons" onkeyup="calculate(this.form)"/>
        <br />
        <input type="checkbox" name="selectedItems1" value="val1" />I have a car
        <br/>
        <input type="text" id="output" value="Output" />
    </form>
</body>
</html>

将<script>标签放置在<form>之后

<<p> 原因/strong>:

当html页面加载时，它将逐行解释。当涉及到click()时，jQuery将尝试找到元素input[name="selectedItems1"]，该元素当时不会加载到DOM中。因此，jQuery不会将click()事件句柄附加到该复选框。

试试这个:

<html>
<head>
    <title>sum totals</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
    <script type="text/javascript">
        function calculate(){
        var j = document.getElementById("output");
        var rege = /^[0-9]*$/;
        var tons = $('#tons').val();
        if ( rege.test(tons) ) {
            val = parseInt(tons);
            var treesSaved = val * 17;
            if($('input[name="selectedItems1"]').is(":checked"))
            {
                treesSaved = treesSaved +300;
            }
            else
            {
                treesSaved = treesSaved -300;
            }
            if(isNaN(treesSaved))
                j.value=0
            else
                j.value=treesSaved;
        }
        else
            alert("Error in input");
        }
$(function(){
  $('input[name="selectedItems1"]').change(function(){
    calculate();
});
});
    </script>
</head>
<body>
    <form>
        <input type="text" placeholder="Tons" id="tons" onkeyup="calculate()"/>
        <br />
        <input type="checkbox" name="selectedItems1" value="val1" />I have a car
        <br/>
        <input type="text" id="output" value="Output" />
    </form>
</body>
</html>

相关文章：