0

我有一个复选框表：

<td><input id="box" name="box" type="checkbox" value="1" checked /></td>
<td><input id="box" name="box" type="checkbox" value="2" checked /></td>
<td><input id="box" name="box" type="checkbox" value="3" checked /></td>

当我选中或取消选中该框（一次一个）时，我想提交复选框值而不将页面刷新到：

if (isset($_GET['box'])) {
   echo "Success!"
}

到目前为止，我得到了这个 javascript 代码来检查该框是选中还是未选中：

function validate(){ 
if (document.getElementById('box').checked){
    alert("checked") ;
}else{
    alert("You didn't check it! Let me check it for you.")
}
}

我想在它上面添加 AJAX，但是到目前为止我尝试的所有代码片段都不适合我的代码。我会感谢你的帮助。

4

2 回答 2

5

您想使用 AJAX。这是一个没有 AJAX 的 jQuery 示例：

<td><input id="box1" class="box" name="box1" type="checkbox" value="1" checked /></td>
<td><input id="box2" class="box" name="box2" type="checkbox" value="2" checked /></td>
<td><input id="box3" class="box" name="box3" type="checkbox" value="3" checked /></td>

JavaScript：

$(document).ready(function() {
  $('.box').on('change', function(event) {
    var checkbox = $(event.target);
    var isChecked = $(checkbox).is(':checked');
    alert('checkbox ' + checkbox.attr('id') + ' is checked: ' + isChecked);
  });
});

演示：http: //jsbin.com/ipasud/1/

现在不再进行alert调用，而是对后端 URL 执行 $.post，该 URL 接受一个 id 和一个选中或未选中的值。例如，

$.post('/submit-checkbox.php', {id: checkbox.attr('id'), value: isChecked});

如果我们把它放回代码中，它看起来像这样：

$(document).ready(function() {
  $('.box').on('change', function(event) {
    var checkbox = $(event.target);
    var isChecked = $(checkbox).is(':checked');
    $.post('/whatever-your-url-is.php', {id: checkbox.attr('id'), value: isChecked});
  });
});
于 2013-02-13T16:40:45.347 回答
0

您可以使用 jQuery：http: //jquery.com/

<script type="text/javascript">
    $(document).ready(function(){
        $('#box').click(function(){
           var selectedValue = $(this).value();
           submitValue(selectedValue);
        });

    });

    function submitValue(valueSelected){

       var request = $.ajax({
                 url: URL_OF_YOUR_PHP_FILE,
                 type: "POST",
                 dataType: 'json',
                     data: {value: valueSelected}
              });

        request.done(function(results) {
           //DO WHAT YOU WANT WITH YOUR RESULTS
        });
    }
</script>

然后在您的 PHP 文件中，您可以获得在 $_POST['value'] 中选择的值并返回您想要的值（以 JSON 格式）。

于 2013-02-13T16:48:07.050 回答