1

動的に生成されるチェック ボックスがあります。チェック ボックスをオンにすると、onchange メソッドが正常に動作し、ユーザーがボックスをオフにすると、関数が呼び出されます。onchange メソッドが目的の関数を呼び出します。問題は、ボックスが一部にチェックされている場合です。ページのアクティブになるのは良いことですが、ユーザーがチェックボックスのチェックを外すと、ページのその部分が再びアクティブになり、チェックボックスの値は最初にチェックされた後も「チェック済み」のままです。ページのアクティブな部分が非アクティブになるように、ユーザーがチェックを外すことを選択したことを検出する方法はありますか。

フォームで送信せずに、チェック ボックスのステータスを送信できますか。投稿するには提出する必要がありますか。これには 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>
4

2 に答える 2

1

チェック状態が更新されるまで、変更イベント ハンドラーは呼び出されません。

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

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

例

handleChange 関数は、チェックボックスの値がいつ true または false に変わるかを教えてくれます。それを使用して、div を非表示および表示します。

于 2012-10-30T17:30:57.927 に答える
0

私のアドバイスは、この種の複雑なリクエストを行うには、jQueryのようなライブラリを使用することをお勧めします。主な理由は、ブラウザ間の互換性があり、実装が容易であることです。あなたと同じロジックについては、jQuery でこの方法を実行できます。

まず、ヘッダーにスクリプトを含めます。

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

次は AJAX GET Request と functionedit()です。

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);
    });
}
于 2012-10-30T17:24:44.913 に答える