javascript - jquery点击事件只影响第一个元素

Question

这个问题已经有答案了:

jQuery click function only works on first element (8 个回答)

已关闭 3 年前。

我正在编写一个应用程序，用户通过切换开关按钮进行选择，但单击事件仅影响第一个元素。

 <label class="switch">
    <input type="checkbox" id="block-instructors" class="block-instructors" value="FMmRXgApuo5AZe4zGqUl">
    <span class="slider round"></span>
</label>                                            
<label class="switch">
   <input type="checkbox" id="block-instructors" class="block-instructors"  value="J0jcK7eUvadzSNaaoG2h">
   <span class="slider round"></span>
</label>  

    $("#block-instructors").on('change', function(e){
        if ($(this).is(':checked')) {
            $(this).attr('value');
            alert($(this).val());
        }
        else {
            $(this).attr('value', 'false');
            alert($(this).val());
        }
    });

Answer 1

一页上的两个元素不能有相同的 ID。使用这个代替

$(".block-instructors").on('change', function(e) {
  if ($(this).is(':checked')) {
    $(this).attr('value');
    alert($(this).val());
  } else {
    $(this).attr('value', 'false');
    alert($(this).val());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
    <input type="checkbox" id="block-instructors" class="block-instructors" value="FMmRXgApuo5AZe4zGqUl">
    <span class="slider round"></span>
</label>                                            
<label class="switch">
   <input type="checkbox" id="block-instructors" class="block-instructors"  value="J0jcK7eUvadzSNaaoG2h">
   <span class="slider round"></span>
</label>