Question

我有动态生成的复选框，当选中复选框时，onchange方法工作正常，当用户取消选中该框时，我的函数也被调用onchange方法调用我的预期函数问题是当框是检查页面的一部分变得活跃，这是好的，但是当用户取消选中复选框时，页面的那一部分再次变为活动状态，并且复选框的值＆＃34;选中＆＃34;在第一次检查后保持为是。有没有办法检测用户何时选择取消检查，以便页面的活动部分变为非活动状态。

我可以发送复选框状态而不在表单中提交。是否必须提交上班。我是否必须使用Java脚本？

我试过这个我有问题

<script type="text/jscript">
//this funciton will be called when user checks a check box. 
function edit(){


     //get selected category from the form 
    //var formName = 'choose';
    //var Category = document[formName]['choose'].value;


    //check if browser suports ajax
    var xmlhttp = null;      
    if(typeof XMLHttpRequest != 'udefined'){
      xmlhttp = new XMLHttpRequest();
    }

    else if(typeof ActiveXObject != 'undefined'){
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    else 
        throw new Error('You browser doesn\'t support ajax');


    //open connection with activateImages.php to recieve the active images as an acho
    xmlhttp.open("GET", "activateImages.php",true);         

    //echeck if ready to recieve        
    xmlhttp.onreadystatechange = function (){

    if(xmlhttp.readyState == 4)
      window.activate(xmlhttp);
    };

    xmlhttp.send(null);
    }

    //recieve the active images then insert them in the specified location of the page. 
    function activate(xhr){

        if(xhr.status == 200){
            document.getElementById('images').innerHTML = xhr.responseText;

        }
        else 
            throw new Error('Server has encountered an error\n'+
            'Error code = '+xhr.status);

}

</script>

Answer 1

在更新已检查状态之前，不会调用更改事件处理程序：

<label><input type='checkbox' onchange='handleChange(this);'>Checkbox</label>

function handleChange(cb) {
  console.log("Changed, new value = " + cb.checked);
}

Example

handleChange函数会告诉你checkbox的值何时会改为true或false。用它来隐藏和显示你的div。

Answer 2

我的建议是，最好使用像 jQuery 这样的库来执行此类复杂请求。主要原因是，它是跨浏览器兼容的，并且更容易实现。对于你的相同逻辑，你可以在jQuery中这样做。

首先在标题中加入脚本。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

接下来是AJAX GET请求和函数edit()。

function edit(){
    $.get("activateImages.php", function(data) {
        $("#images").html(data);
    }).error(function(e){
        throw new Error('Server has encountered an error\n' + 'Error code = ' + e);
    });
}

复选框问题（使用post和onchange）

2 个答案: