web-dev-qa-db-ja.com

jQueryAjaxチェックボックスの状態

ページにチェックボックスがあり、それらの状態をajax経由でデータベースに送り返します。 ajaxでjqueryを使用する方法は知っていますが、チェックボックスのIDとともにチェックされた状態とチェックされていない状態の両方を取得して、サーバーに送り返す方法がわかりません。

何か案は？

jqueryajaxcheckboxstate
11
oshirowanen
if ($("#yourCheckboxID").is(":checked")) {  
    // checkbox is checked 
} else {
    // checkbox is not checked 
}

仕事をします。

22
Ain Tohvri

このようなもの：

<script type="text/javascript">
    $(document).ready(function(){
        $("input:checkbox").change(function() { 
            if($(this).is(":checked")) { 
                $.ajax({
                    url: 'on_off.aspx',
                    type: 'POST',
                    data: { strID:$(this).attr("id"), strState:"1" }
                });
            } else {
                $.ajax({
                    url: 'on_off.aspx',
                    type: 'POST',
                    data: { strID:$(this).attr("id"), strState:"0" }
                });
            }
        }); 
    });
</script>
16
oshirowanen

あなたの解決策とAinによって受け入れられた答えを組み合わせる：

<script type="text/javascript">
  $(document).ready(function(){
    var isChecked = $("input:checkbox").is(":checked") ? 1:0; 
    $.ajax({
            url: 'on_off.aspx',
            type: 'POST',
            data: { strID:$("input:checkbox").attr("id"), strState:isChecked }
    });        
  });
</script>
10
chridam

マージされたソリューションに変更イベントを追加し直します。チェックボックスが変更されるたびにこれを起動したい。

<script type="text/javascript">
    $(document).ready(function(){
        $("input:checkbox").change(function() { 
            var isChecked = $("input:checkbox").is(":checked") ? 1:0; 
            $.ajax({
                url: 'on_off.aspx',
                type: 'POST',
                data: { strID:$("input:checkbox").attr("id"), strState:isChecked }
            });        
        });        
    });
</script>
2
stuart

チェックボックスを見つけるのは簡単です。

$(':checkbox').whatever()

秘訣は、HTMLのチェックボックスには、checkedの場合にのみ意味のある値があるということです。チェックされていない場合、サーバーに何を伝えますか？

慣例がある場合（おそらく、チェックされている場合は常に「true」を送信し、チェックされていない場合は「false」を送信します）、次に決定する必要があるのは、それらをサーバーに取得する方法です。 jQuery param関数を使用して、リストをパラメーター文字列に変換できます。

var params = $.param($(':checkbox').map(function() {
   return { name: this.id, value: !!this.checked };
}));

これにより、URLに追加したり、$.ajaxを介してデータとして送信したりする準備ができた文字列が得られます。

0
Pointy