javascript - 标签 -> 复选框文本

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>