1

データベースから出てきて、各要素のチェックボックスが付いたリストに入れられる情報があります。これが現在行われている方法です：

  function subjects(){
    $.ajax({
    url: "lib/search/search.subject.php",
    async: "false",
    success: function(response){
    alert(response);
            var responseArray = response.split(',');    
            for(var x=0;x<responseArray.length;x++){
            $("#subjects").append("<br />");
            $("#subjects").append(responseArray[x]);
            $("#subjects").append("<input type='checkbox' />");
            }           
        }
    });
}

それは問題なく動作しますが、チェックボックスがクリックされた場合、クリックされた場合はどれがクリックされたか、または複数のチェックボックスがクリックされた場合を表示する方法が必要です。

チェックボックスを選択する方法がまったく見つからないようです。

応答変数は「数学、科学、技術、工学」です

4

4 に答える 4

3

チェックボックスを動的に設定しているため、イベントを委任する必要があります 

$("#subjects").on("click", "input[type='checkbox']", function() {
    if( $(this).is(":checked") ) {
       alert('Checkbox checked')
    }
});

データをより適切にキャプチャするには、対応するデータを span で囲んだほうがよいため、検索が容易になります。

 $("#subjects").append('<span>'+responseArray[x] + '</span>');

$("#subjects").on("click", "input[type='checkbox']", function() {
        var $this = $(this);
        if( $this.is(":checked") ) {
            var data = $this.prev('span').html();
            alert('Current checkbox is : '+ data ) 
        }
    });
于 2012-12-19T20:56:46.557 に答える
0

動的に挿入されたチェックボックスに、それらをより適切にターゲットとするクラスを与えるのが最善ですが、コードに基づいて試してください：

$("#subjects").on("click", "input", function() {
    if( $(this).is(":checked") ) {
    // do something
    }
});

入力要素は動的に追加されるため、jQuery の.on()関数を使用してクリック イベントをそれらにバインドする必要があります。あなたの場合.on()、スクリプトがロードされたときにDOMに存在する要素にバインドするために使用する必要があります。あなたの場合、ID #subjects を持つ要素。

ドキュメントからのこのメモは、主に、明らかな理由もなく私の回答に反対票を投じた machineghost 向けです。

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。

于 2012-12-19T20:49:41.783 に答える
0 
$('#subjects input[type=checkbox]').on('click',function(){
    alert($(this).prop('checked'));
});

または変更イベント: 誰かがキーボードを使用する場合

$('#subjects input[type=checkbox]').on('change',function(){
    alert($(this).prop('checked'));
});

簡単なフィドルの例: http://jsfiddle.net/Dr8k8/

配列の例を取得するには、入力のインデックスを使用します

alert($(this).prop('checked') +'is'+ $(this).parent().find('input[type=checkbox]').index(this)+ responseArray[$(this).parent().find('input[type=checkbox]').index(this) ]);

簡単な例: http://jsfiddle.net/Dr8k8/1/

編集：例として、結果をすべてのチェックボックスの配列に入れて、それで何かをすることができます：

$('#subjects>input[type=checkbox]').on('change', function() {
    var checklist = [];
    $(this).parent().find('input[type=checkbox]').each(function() {
        $(this).css('background-color', "lime");
        var myindex = $(this).parent().find('input[type=checkbox]').index(this);
        if ($(this).prop('checked') == true) {
            checklist[myindex] = responseArray[myindex];
        }
    });
    $('#currentlyChecked').text(checklist);
});

EDIT2：

私はこれについて少し考えました.data()を使用してそれを改善し、それをクエリするか、イベントに基づいて保存します(私のボタンは「whatschecked」のIDで呼び出されます)

var responseArray = ['math', 'science', 'technology', 'engineering'];// just for an example
var myList = '#subjects>input[type=checkbox]';//to reuse
for (var x = 0; x < responseArray.length; x++) {
    // here we insert it all so we do not hit the DOM so many times
    var iam = "<br />" + responseArray[x] + "<input type='checkbox' />";
    $("#subjects").append(iam);
    $(myList).last().data('subject', responseArray[x]);// add the data
}
var checklist = [];// holds most recent list set by change event
$(myList).on('change', function() {
    checklist = [];
    $(myList).each(function() {
        var myindex = $(this).parent().find('input[type=checkbox]').index(this);
        if ($(this).prop('checked') == true) {
            checklist.push($(this).data('subject'));
            alert('This one is checked:' + $(this).data('subject'));
        }
    });
});
// query the list we stored, but could query the checked list data() as well, see the .each() in the event handler for that example
$("#whatschecked").click(function() {
    var numberChecked = checklist.length;
    var x = 0;
    for (x = 0; x < numberChecked; x++) {
        alert("Number " + x + " is " + checklist[x] + " of " + numberChecked);
    }
});

最後の例の実例: http://jsfiddle.net/Dr8k8/5/

于 2012-12-19T20:50:27.057 に答える
-1

チェックボックスの入力がクリックされたときに何かを行う一般的なパターンは次のとおりです。

$('input[type=checkbox]').click(function() {
    // Do something
})

チェックボックスの入力がチェックされているかどうかを確認する一般的なパターンは次のとおりです。

var isItChecked = $('input[type=checkbox]').is(':checked');

あなたの特定のケースでは、おそらく次のようなことをしたいと思うでしょう:

$('#subjects input[type=checkbox]').click(function() {

関連するチェックボックスを#subjects要素内のものに制限します。

于 2012-12-19T20:39:18.367 に答える