JQuery не в состоянии найти идентификатор или имя ячейки

Question

У меня есть страница с флажком, который оформлен в стиле. Я пытаюсь вернуть их имя или идентификатор, когда они будут изменены.

Я создал скрипку здесь: https://jsfiddle.net/xpq8g13s/

Это показывает проблему. Используемый jquery:

$(document).ready(function() { 
    $(this).change(function() { 
     alert($(this).attr("name")); 
     alert($(this).attr("id")); 
    }); 
}); 

Может кто-нибудь посоветует, почему это не работает?

Благодаря

Answer 1

$(this).change(function() {... ищут событие изменения в document, поэтому, когда вы обратитесь к this позже, он пытается получить name и id атрибутов document.

Используйте это событие связывания вместо

$("#check").change(function() { 
    ... 

Образец

$(document).ready(function() { 
 
    $("input[type='checkbox']").change(function() { 
 
    alert($(this).attr("name")); 
 
    alert($(this).attr("id")); 
 
    }); 
 
});

.switch { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 53px; 
 
    height: 19px 
 
} 
 
.switch input { 
 
    display: none 
 
} 
 
.slider { 
 
    position: absolute; 
 
    cursor: pointer; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #ccc; 
 
    -webkit-transition: .4s; 
 
    transition: .4s 
 
} 
 
.slider:before { 
 
    position: absolute; 
 
    content: ""; 
 
    height: 11px; 
 
    width: 19px; 
 
    left: 4px; 
 
    bottom: 4px; 
 
    background-color: #fff; 
 
    -webkit-transition: .4s; 
 
    transition: .4s 
 
} 
 
input:checked+.slider { 
 
    background-color: #008c00 
 
} 
 
input:focus+.slider { 
 
    box-shadow: 0 0 1px #2196F3 
 
} 
 
input:checked+.slider:before { 
 
    -webkit-transform: translateX(26px); 
 
    -ms-transform: translateX(26px); 
 
    transform: translateX(26px) 
 
} 
 
input, 
 
select, 
 
textarea { 
 
    border: 1px solid #A0A0A0; 
 
    background: #FFF; 
 
    padding: 3px 4px; 
 
    color: #222; 
 
    margin: 2px 5px 2px 0px; 
 
} 
 
input:focus, 
 
select:focus, 
 
textarea:focus { 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' class='tooltip' title='tooltip text.'> 
 
    <img src='images/tooltip.png'> 
 
</a>&nbsp;<b>This is my Text Label:</b> 
 
</div>&nbsp; 
 

 
<label class="switch"> 
 
    <input type="checkbox" name='check' id='check' title='checkbox' value="1"> 
 
    <div class="slider"></div> 
 
</label> 
 

 
<br/> 
 
<input type="text" id="textinput" name="textinput" size="40" maxlength="40" autocomplete="off" placeholder="enter text here" value="" tabindex='1' disabled/> 
 
</div> 
 
<br/> 
 

 
<label class="switch"> 
 
    <input type="checkbox" name='check2' id='check2' title='checkbox' value="1"> 
 
    <div class="slider"></div> 
 
</label>

Answer 2

Попробуйте так:

$(document).ready(function() { 
$('.yourChkboxsClassName').change(function() { 
    alert($('.yourChkboxsClassName').attr("name")); 
    alert($('.yourChkboxsClassName').attr("id")); 
}); 
}); 

Установите уникальное имя класса для всех своих флажков и используйте его в своем коде вместо вашегоChkboxsClassName.

С

это

вы просто обратитесь к области, в которой определяется ваша функция.