ラベル>チェックボックスのテキスト

Question

は私が.. 私は、チェックボックスの2つのグループのために、このHTMLコードこの問題を持っています

<label class="checkbox"><input type="checkbox" onClick="toggle_colors(this)" checked><i></i>All Colors</label> 
<label class="checkbox"><input type="checkbox" name="colore" checked><i></i>red</label> 
    <label class="checkbox"><input type="checkbox" name="colore" checked><i></i>yellow</label> 

    <label class="checkbox"><input type="checkbox" onClick="toggle_brands(this)" checked><i></i>Tutte le Marche</label> 
<label class="checkbox"><input type="checkbox" name="brand" checked><i></i>Acer</label> 
    <label class="checkbox"><input type="checkbox" name="brand" checked><i></i>Asus</label> 

をそして私は/トグルすべてすべての選択のために、このJavaScriptを使用します。

function toggle_brands(source) { 
    checkboxes = document.getElementsByName('brand'); 
    for(var i=0, n=checkboxes.length;i<n;i++) { 
    checkboxes[i].checked = source.checked; 
    } 
} 
function toggle_colors(source) { 
    checkboxes = document.getElementsByName('colore'); 
    for(var i=0, n=checkboxes.length;i<n;i++) { 
    checkboxes[i].checked = source.checked; 
    } 
} 

チェックボックスは、私はこのJavaScriptを使用しているかどうかを知るために

ユーザーが、私はAJAXによって、クエリの詳細を送信するために、チェックボックスが選択されているかどうかを知る必要があり、チェックボックスをクリックしてください。.. ：

$("[type=checkbox]").change(function() { 
    if(this.checked) { 
     alert('checked'); 
    } 
    else { 
     alert('unchecked'); 
    } 
}); 

選択したチェックボックスの右側にテキストが必要です。

[OK]親作業で正常に！ 私は、クエリを作成するには、このコードを追加しました：

function create_query(){ 
var query = "SELECT * FROM computers ORDER BY " + ($("#ordine option:selected").val()) + " LIMIT " + ($("#risultati option:selected").val()); 
$.ajax({ 
    type: "POST", 
    url: "static/cerca_prodotti.php", 
    data: "query="+query, 
    dataType: "html", 
    success: function(risposta){ 
     $("div#risultati").html(risposta); 
    }, 
}) 
} 
$("[type=checkbox]").change(function() { 
    if(this.checked) {} 
    else {} 
}); 

$("#ordine").change(function() { 
    create_query(); 
}); 

をしかし、私はチェックボックスが/未チェックチェックした時にクエリを変更する必要があります！

Answer 1

checkedプロパティをプログラムで変更すると、changeイベントはトリガされません。イベントを手動でトリガする必要があります。

$('input[data-all-type]').change(function() { 
 
    $('input[name="' + $(this).data('allType') + '"]')[this.checked ? 'not' : 'filter'](':checked').prop('checked', this.checked).change(); 
 
}) 
 

 
$("input[type=checkbox]:not([data-all-type])").change(function() { 
 
    if (this.checked) { 
 
    console.log('checked', this); 
 
    } else { 
 
    console.log('unchecked', this); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="checkbox"> 
 
    <input type="checkbox" name="color-all" data-all-type="colore"><i></i>All Colors</label> 
 
<label class="checkbox"> 
 
    <input type="checkbox" name="colore"><i></i>red</label> 
 
<label class="checkbox"> 
 
    <input type="checkbox" name="colore"><i></i>yellow</label> 
 

 
<label class="checkbox"> 
 
    <input type="checkbox" name="brand-all" data-all-type="brand"><i></i>Tutte le Marche</label> 
 
<label class="checkbox"> 
 
    <input type="checkbox" name="brand"><i></i>Acer</label> 
 
<label class="checkbox"> 
 
    <input type="checkbox" name="brand"><i></i>Asus</label>

Answer 2

は1つだけの機能

function toggle_checkbox(source, things) { 
    $('input[name="' + things + '"]').prop('checked', $(source).is(':checked')) 

    //OR 

    $('input[name="' + things + '"]').prop('checked', source.checked); 
} 

function toggle_checkbox(source, things) { 
 
    $('input[name="' + things + '"]').prop('checked', source.checked); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="checkbox"> 
 
    <input type="checkbox" onClick="toggle_checkbox(this,'colore')" checked><i></i>All Colors</label> 
 
<label class="checkbox"> 
 
    <input type="checkbox" name="colore" checked><i></i>red</label> 
 
<label class="checkbox"> 
 
    <input type="checkbox" name="colore" checked><i></i>yellow</label> 
 

 
<label class="checkbox"> 
 
    <input type="checkbox" onClick="toggle_checkbox(this,'brand')" checked><i></i>Tutte le Marche</label> 
 
<label class="checkbox"> 
 
    <input type="checkbox" name="brand" checked><i></i>Acer</label> 
 
<label class="checkbox"> 
 
    <input type="checkbox" name="brand" checked><i></i>Asus</label>

Answer 3

であなたはこの中で、チェックボックスの親ノードのテキストを得ることができることを行うことができますway：