Label -> Checkbox Text

Question

I have this problem.. I have this HTML code for 2 groups of checkbox:

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

And I use this javascripts for select 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;
  }
}

When the user click on the checkbox I need to know if the checkbox is selected or not, to send the details of the query by AJAX.. To know if the checkbox I use this javascript:

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

I want the text at the right of the selected checkbox..!

Ok.. With the parent work fine! I have added this code to create the query:

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

But I need to modify the query when the checkbox was checked/unchecked!

Answer 1

You can get text of the parent node of the checkbox in this way:

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

Answer 2

You can do that with only one function

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

When you change the checked property programatically, the change event will not get triggered, you need to trigger the event manually.

$('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>