如何使用onchang複選框或按下按鈕提交此功能？

Question

如何使用onchang複選框提交此功能或按下按鈕？

我想提交表單，並調用函數時onchang複選框或按下按鈕，

我怎樣才能做到這一點？

<form method="post" id="f1"> 
    <input type="checkbox" id="one" name="one" value="1">1<br> 
    <input type="checkbox" id="two" name="two" value="2">2<br> 
    <input type="submit" id="submit" name="submit" value="OK"/> 
</form> 



<script> 
$(document).ready(function(){ 
    $('#submit').click(function() { 
     $('#overlay').show(); 
     $.ajax({ 
      url: 'test.php', 
      type: 'POST', 
      data: $('#f1').serialize(), 
      success: function(data){ 
       $('#overlay').hide(); 
       $('#result').html(data); 
      } 
     }); 
     return false; 
    }); 
}) 
</script> 

Answer 1

，你可以這樣做：

<form method="post" id="f1"> 
    <input type="checkbox" id="one" name="one" value="1" />1<br/> 
    <input type="checkbox" id="two" name="two" value="2" />2<br/> 
    <input type="submit" id="submit" name="submit" value="OK"/> 
</form> 
<script> 
$(document).ready(function(){ 
$('#f1').submit(function() { 
    $('#overlay').show(); 
    $.ajax({ 
     url: 'test.php', 
     type: 'POST', 
     data: $('#f1').serialize(), 
     success: function(data){ 
      $('#overlay').hide(); 
      $('#result').html(data); 
     } 
    }); 
    return false; 
}); 
$('#f1').change(function(){ 
    $(this).submit(); 
}); 
}) 
</script> 

Answer 2

DEMO ....看控制檯輸出或網絡輸出，你點擊submit按鈕或任何checkboxes的。

你想讓submit按鈕完成它的工作 - 提交表格作爲開始。點擊submit按鈕始終會觸發提交表單事件。你想要一個checkbox更改事件觸發相同的事件提交表單事件和相應的事件處理程序將負責其餘的事情。

$(document).ready(function(){ 
    $('#f1 :checkbox').on('change',function() { 
     $(this.form).submit(); 
    }); 
    $('#f1').on('submit', function(e) { 
     e.preventDefault(); 
     $('#overlay').show(); 
     $.ajax({ 
      url: 'test.php', 
      type: 'POST', 
      data: $(this).serialize(), 
      success: function(data){ 
       $('#overlay').hide(); 
       $('#result').html(data); 
      } 
     }); 
    }); 
}); 

Answer 3

我的代碼工作，有問題嗎？

<form method="post" id="f1"> 
    <input type="checkbox" id="one" name="one" value="1" onclick="xxx()">1<br> 
    <input type="checkbox" id="two" name="two" value="2" onclick="xxx()">2<br> 
    <input type="submit" id="submit" name="submit" value="OK" onclick="return xxx();"/> 
</form> 

    <script> 
    function xxx(){ 
     $('#overlay').show(); 
     $.ajax({ 
      url: 'test.php', 
      type: 'POST', 
      data: $('#f1').serialize(), 
      success: function(data){ 
       $('#overlay').hide(); 
       $('#result').html(data); 
       } 
      }); 
     return false; 
    } 
    </script>