Получить флажок значения без обновления страницы

Question

Я получил таблицу флажков:

<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!" 
} 

до сих пор я получил этот яваскрипта код для проверки того, установлен флажок или снят:

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

Я хочу добавить AJAX на него, но весь код фрагмента, который я пробовал до сих пор, не соответствовал моему коду. Я благодарю за вашу помощь.

Answer 1

Вы хотите использовать AJAX. Вот пример в JQuery без AJAX:

<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 вызов, сделать $ .post с внутренним сервером URL, который принимает идентификатор и значение проверенных или непроверенных. Например,

$.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}); 
    }); 
}); 

Answer 2

Вы можете использовать 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).