Label -> Галочка Текст

Question

Я эта проблема .. У меня есть этот HTML-код для 2-х групп флажка:

<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> 

И я использую этот JavaScripts для выбора все/переключить все:

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; 
    } 
} 

Когда пользователь нажимает на флажок, мне нужно знать, если флажок установлен или нет, чтобы отправить детали запроса по AJAX .. чтобы узнать, если флажок Я использую этот JavaScript:

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

Я хочу текст справа от выбранного флажка.!

Хорошо .. С родительской работой отлично! Я добавил этот код, чтобы создать запрос:

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

Вы можете сделать это только с одной функцией

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

Вы можете получить текст родительского узла флажок в этом путь:

$("[type=checkbox]").change(function() { 
    var text = this.parentElement.innerText; 
    if(this.checked) { 
     alert(text + ': checked'); 
    } 
    else { 
     alert(text + ': unchecked'); 
    } 
});