Question

我有这个问题.. 我有两组复选框的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>

我使用这个javascripts来选择all / toggle all：

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事件不会被触发，您需要手动触发事件。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只有一个功能

可以做到这一点

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

   //OR

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以通过以下方式获取复选框的父节点的文本：

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

标签 - ＆gt;复选框文本

3 个答案: