标签 - >复选框文本

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