Làm cách nào để sử dụng Javascript để thay đổi giá trị của đầu vào bị ẩn tùy thuộc vào trạng thái của hộp kiểm?

Question

Tôi đang cố thay đổi giá trị của trường nhập bị ẩn, tùy thuộc vào giá trị của hộp kiểm. Tôi không biết nhiều về Javascript nhưng đây là những gì tôi có cho đến nay.

<input type="hidden" value="" id="delterms" name="O_" /> 
<input type="checkbox" id="checkbox" onchange="terms()" /> 
<script type="text/javascript"> 
var checked = document.getElementById('checkbox').checked; 
    function terms() { 
    if (checked==false) 
    { 
    document.getElementById('delterms').value='' 
    } 
    else 
    { 
    document.getElementById('delterms').value='Accepted' 
    } 
} 
</script> 

Tôi đã làm việc này nhưng chỉ khi nhấp chuột đầu tiên, có cách nào để đặt giá trị tùy thuộc vào trạng thái hộp kiểm không? Tôi nghi ngờ có một số cách đơn giản hơn rất nhiều và tôi không có nghi ngờ về phức tạp vấn đề.

Answer 1

Hãy thử thêm một event listener thay vì sử dụng HTML "onchange" thuộc tính, điều này có thể làm sáng tỏ việc cho bạn và có lẽ sẽ làm cho mã của bạn dễ dàng hơn để duy trì trong thời gian dài:

<input type="hidden" id="delterms" value="" name="O_" /> 
<input type="checkbox" id="checkbox" /> 
<script type="text/javascript"> 
    var checkbox = document.getElementById('checkbox') 
    , hidden = document.getElementById('delterms'); 
    checkbox.addEventListener('change', function() { 
    hidden.value = (this.checked) ? 'Accepted' : ''; 
    }, false); 
</script> 

Ý tưởng là các chức năng ẩn danh được chạy mỗi lần người dùng nhấp vào hộp kiểm, trong đó đặt giá trị của trường bị ẩn thành "Đã chấp nhận" hoặc chuỗi trống, tùy thuộc vào việc hộp có được chọn hay không.

Điều này jsFiddle hiển thị ví dụ hoạt động.

Answer 2

Biến số checked của bạn chỉ được đặt một lần, vì vậy giá trị này luôn bằng với giá trị nội sinh. Di chuyển nó bên trong chức năng của bạn terms().

Answer 3

Di chuyển nhượng biến vào chức năng, như sau:

function terms() { 
    var checked = document.getElementById('checkbox').checked; 
    if (checked==false) 

Answer 4

nhận được giá trị kiểm tra bên trong hàm của bạn

<script type="text/javascript"> 

     function terms() { 
     var checked = document.getElementById('checkbox').checked; 
     if (checked==false) 
     { 
     document.getElementById('delterms').value='' 
     } 
     else 
     { 
     document.getElementById('delterms').value='Accepted' 
     } 
    } 
    </script> 

Answer 5

cố định trong một fiddle - sử dụng tổ chức sự kiện của click.

http://jsfiddle.net/hSMbf/1/

Answer 6

Bởi vì hộp kiểm không được gửi trong một form.submit() khi họ không được kiểm soát tôi sử dụng một lĩnh vực ẩn mà được cập nhật khi hộp kiểm được nhấp vào.

<input type="hidden" id="chbx" value="" name="0_"> 
<input type="checkbox" id="__chbx" 
    onclick="document.getElementById('chbx').value = 
      document.getElementById('__chbx').checked;"/> 

(Tôi đã bỏ qua jsp-mã mà thêm checked tài sản để vào hộp kiểm đầu vào nếu nó đã được kiểm tra khi vẽ trang.)