標籤 - >複選框文本

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

當用戶點擊複選框時，我需要知道是否選中該複選框，通過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'); 
    } 
});