如何在jQuery更改功能中选择动态类？

Question

I have a input field having dynamic class as:

<input class="chek" data-id="1" type="checkbox" data-toggle="toggle">
<input class="chek" data-id="2" type="checkbox" data-toggle="toggle">
<input class="chek" data-id="3" type="checkbox" data-toggle="toggle">

Here is my Js:

$(".chek").unbind().change(function(e) {
var getid = $(this).attr('data-id');
alert(getid);
e.preventDefault();

$.ajax({
        url: base_url + '/admin/program/setslider?selected='+getid,
        type: 'POST',
        dataType: 'json', 
        data: getid,
        headers: {
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
       })

Problem is $(this).attr('data-id'); returns all the data-id attr refering to same class chek (i supposed $(this) would return data-id if specific class only but it returns all the data-id)

Solution I suppose is getting dynamic class for selecting specific input like:

<input class="chek_1" data-id="1" type="checkbox" data-toggle="toggle">
<input class="chek_2" data-id="2" type="checkbox" data-toggle="toggle">
<input class="chek_3" data-id="3" type="checkbox" data-toggle="toggle"> 

And JS be like:

$(".chek_'+ id +'").unbind().change(function(e) {
// code here
 }

Note:

I am using bootstrap toggle http://www.bootstraptoggle.com/ to make change in checkbox.

Answer 1

I think you want to get the change event of the checkboxes.

Based on your HTML you can use the following code to get the change event.

$("input[data-toggle='toggle']").change(function(){
      alert(this.checked);
});

OR

$("input:checkbox").change(function(){
      alert(this.checked);
});

Refer Fiddle