web-dev-qa-db-ja.com

チェックボックスのIDを取得しますか？ -jQuery

チェックされているときにチェックボックスのIDを取得する方法を知りたいです。

これは、私のHTMLはおそらく最初は次のようになります。

<div class="check_filter">

    <div id="filter">
        <input type="checkbox" id="check1" /><label for="check1">Marketing</label>
        <input type="checkbox" id="check2" /><label for="check2">Automotive</label>
        <input type="checkbox" id="check3" /><label for="check3">Sports</label>
    </div>

</div><!-- End check_filter -->

私はjQueryが次のようになると想定しています：

$(document).ready(function() {    
    $(":checkbox").click(function(){
        var id = $(this).attr('id');

        $.post("index.php", { id: id });
       //return false to ensure the page doesn't refresh
       return false;
    });    
});

チェック済みのアイテムIDを取得し、そのIDをMySQLクエリに投稿して、データベースからIDの結果を取得しようとしています。

これについて何か助けてくれてありがとう。

jquerycheckbox
16
DonDraper

おそらく、ここに change イベントが必要です：

$(function() {
  $(":checkbox").change(function(){
    $.post("index.php", { id: this.id, checked: this.checked });
  });    
});

これは、チェックボックスが変更されるたびに投稿し、PHP側にIDと、それがチェックされているかどうかを知らせます。

17
Nick Craver

あなたが提供したjQueryは正常に動作しますか？おそらくreturn false toshowチェックボックスがオンになっていることを示します。

編集： $。post（） は非同期リクエスト（AJAX手法）用であるため、ページの更新は行われません。

編集2：チェックボックスがチェックされているかどうかを確認することもできます（クリックされたことだけではありません）：

$(document).ready(function() {    
  $(":checkbox").click(function(){
        var id = $(this).attr('id');
        var isChecked = $(this).attr('checked'));
        $.post("index.php", { id: id, isChecked: isChecked });
    });    
});
8
TheCloudlessSky

_:checkbox_セレクターを使用して、次のようにDOM要素のidおよびcheckedプロパティを確認できます。

var id = $(this).find(":checkbox")[0].id;var isChecked = $(this).find(":checkbox")[0].checked;

2
Jonathan Burgos Gio

投稿の代わりにjQuery getを使用する方が良いでしょう。リクエストの出力を処理することができます： http://api.jquery.com/jQuery.get/

例：

$(document).ready(function() {    
  $(':checkbox').click(function(){
        var id = $(this).attr('id');
        var isChecked = $(this).attr('checked'));
        $.get(
          'getcheckbox.php', 
          { id: id, isChecked: isChecked },
          function(data) {
            //return value in getcheckbox.php and use it in on complete function
            var result = data;
          }
        );
    });    
});
1
filster

チェックボックスの名前にのみ必要なのに、値にアクセスするために$（this）を使用する理由

$('input:checkbox').change( function() {
        console.log("here i am: " + this.name + " value = " + $(this).val() );
        }
    );
0
Simon H