Hộp kiểm Javascript trên Thay đổi

Tôi có một hộp kiểm trong một biểu mẫu và tôi muốn nó hoạt động theo kịch bản sau:

• nếu ai đó kiểm tra nó, giá trị của trường văn bản ( totalCost) sẽ được đặt thành 10.
• sau đó, nếu tôi quay lại và bỏ chọn nó, một hàm calculate()sẽ đặt giá trị totalCosttheo các tham số khác trong biểu mẫu.

Về cơ bản, tôi cần một phần trong đó, khi tôi chọn hộp kiểm tôi làm một việc và khi tôi bỏ chọn nó, tôi làm một việc khác.

function calc()
{
  if (document.getElementById('xxx').checked) 
  {
      document.getElementById('totalCost').value = 10;
  } else {
      calculate();
  }
}

HTML

<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>

Javascript thuần túy:

const checkbox = document.getElementById('myCheckbox')

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    alert('checked');
  } else {
    alert('not checked');
  }
})

My Checkbox: <input id="myCheckbox" type="checkbox" />

Nếu bạn đang sử dụng jQuery .. thì tôi có thể đề xuất như sau: LƯU Ý: Tôi đã thực hiện một số giả định ở đây

$('#my_checkbox').click(function(){
    if($(this).is(':checked')){
        $('input[name="totalCost"]').val(10);
    } else {
        calculate();
    }
});

Sử dụng một sự kiện onclick, bởi vì mỗi lần nhấp vào hộp kiểm thực sự thay đổi nó.

Các giải pháp sau đây sử dụng jquery. Giả sử bạn có một hộp kiểm với id của checkboxId.

const checkbox = $("#checkboxId");

checkbox.change(function(event) {
    var checkbox = event.target;
    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
});

HTML:

<input type="checkbox" onchange="handleChange(event)">

JS:

function handleChange(e) {
     const {checked} = e.target;
}

Tham chiếu hộp kiểm theo id chứ không phải với # Gán chức năng cho thuộc tính onclick thay vì sử dụng thuộc tính thay đổi

var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) {
    var checkbox = event.target;

    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
};

Tôi biết điều này có vẻ giống như câu trả lời của Noob nhưng tôi sẽ đặt nó ở đây để nó có thể giúp đỡ người khác trong tương lai.

Giả sử bạn đang xây dựng một bảng với một vòng lặp foreach. Và đồng thời thêm các hộp kiểm ở cuối.

<!-- Begin Loop-->
<tr>
 <td><?=$criteria?></td>
 <td><?=$indicator?></td>
 <td><?=$target?></td>
 <td>
   <div class="form-check">
    <input type="checkbox" class="form-check-input" name="active" value="<?=$id?>" <?=$status?'checked':''?>> 
<!-- mark as 'checked' if checkbox was selected on a previous save -->
   </div>
 </td>
</tr>
<!-- End of Loop -->

Bạn đặt một nút bên dưới bảng với một đầu vào ẩn:

<form method="post" action="/goalobj-review" id="goalobj">

 <!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.i.e. $saved_data = "1,2,3"; -->

 <input type="hidden" name="result" id="selected" value="<?= $saved_data ?>>
 <button type="submit" class="btn btn-info" form="goalobj">Submit Changes</button>
</form>

Bạn có thể viết kịch bản của bạn như vậy:

<script type="text/javascript">
    var checkboxes = document.getElementsByClassName('form-check-input');
    var i;
    var tid = setInterval(function () {
        if (document.readyState !== "complete") {
            return;
        }
        clearInterval(tid);
    for(i=0;i<checkboxes.length;i++){
        checkboxes[i].addEventListener('click',checkBoxValue);
    }
    },100);

    function checkBoxValue(event) {
        var selected = document.querySelector("input[id=selected]");
        var result = 0;
        if(this.checked) {

            if(selected.value.length > 0) {
                result = selected.value + "," + this.value;
                document.querySelector("input[id=selected]").value = result;
            } else {
                result = this.value;
                document.querySelector("input[id=selected]").value = result;
            }
        }
        if(! this.checked) { 

// trigger if unchecked. if checkbox is marked as 'checked' from a previous saved is deselected, this will also remove its corresponding value from our hidden input.

            var compact = selected.value.split(","); // split string into array
            var index = compact.indexOf(this.value); // return index of our selected checkbox
            compact.splice(index,1); // removes 1 item at specified index
            var newValue = compact.join(",") // returns a new string
            document.querySelector("input[id=selected]").value = newValue;
        }

    }
</script>

Id của các hộp kiểm của bạn sẽ được gửi dưới dạng chuỗi "1,2" trong biến kết quả. Sau đó, bạn có thể chia nó ở cấp điều khiển theo cách bạn muốn.

Javascript

  // on toggle method
  // to check status of checkbox
  function onToggle() {
    // check if checkbox is checked
    if (document.querySelector('#my-checkbox').checked) {
      // if checked
      console.log('checked');
    } else {
      // if unchecked
      console.log('unchecked');
    }
  }

HTML

<input id="my-checkbox" type="checkbox" onclick="onToggle()">

thử

totalCost.value = checkbox.checked ? 10 : calculate();

function change(checkbox) {
  totalCost.value = checkbox.checked ? 10 : calculate();
}

function calculate() {
  return other.value*2;
}

input { display: block}

Checkbox: <input type="checkbox" onclick="change(this)"/>
Total cost: <input id="totalCost" type="number" value=5 />
Other: <input id="other" type="number" value=7 />