jQuery에서 변경하면 CSS가 체크 박스의 체크 속성을 인식하지 못합니다.

Question

CSS 및 속성에 문제가 있습니다. jQuery를 변경할 때 체크 박스가 선택되어 있습니다. ('check'). on ('change') 기능을 사용하면 CSS에서 요소 스타일을 올바르게 표시하고 있습니다. ('#checkbox'). on ('click')을 사용하고 ' jQuery에서 'checked'를 선택하면 CSS는이 설정을 무시하는 것으로 보입니다.

CSS가 이벤트가 발생한 후, 그리고 jQuery가 완료되기 전에 페이지에 적용된 것처럼 보입니다. 또한 "변경"이벤트를 수동으로 트리거하려했지만 성공하지 못했습니다.

'클릭'체크 박스를 전환하고 올바른 CSS가 적용되었는지 확인하는 방법이 있습니까?

먼저 다음 두 번째 체크 박스를

https://jsfiddle.net/porzechowski/9yoqd736/

jQuery를,이 문제를 참조 jsfiddle를 방문하여 클릭

$(document).ready(function() { 

    /** 
    /* for first checkox we can see changed color, after checkox status is changed 
    /* for second checkbox attribute checked and prop is changed, but CSS is not recognizing it 
    **/ 

    // this is code for checkbox 1 - working 

    $('body').on('change', '#checkbox1', function (e) { 
     e.preventDefault(); 
     if ($(this).attr('checked')) { 
      console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked')); 
      return; 
     } 
     console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked')); 
    }); 

    // this is code for checkbox 2 - css not working 
    $('body').on('click', '#checkbox2', function (e) { 
     e.preventDefault(); 
     if ($(this).attr('checked')) { 
      $(this).removeAttr('checked'); 
      $(this).prop("checked", false); 
      console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked')); 
      return; 
     } 
     $(this).attr('checked', 'checked'); 
     $(this).prop("checked", true) 
     console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked')); 
    }); 

}); 

CSS

.add-to-favorites-checkbox[type="checkbox"] + .add-to-favorites-checkbox-icon span { 
width: 16px; 
height: 16px; 
background-color: red; 
display: block; 
} 

.add-to-favorites-checkbox[type="checkbox"]:checked + .add-to-favorites-checkbox-icon span { 
background-color: green; 
display: block; 
} 

input { 
display: none; 
} 

HTML

<span class="add-to-bookmark add-btn"> 
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox1" value="1" name="checkbox-favorites"> 
<label class="add-to-favorites-checkbox-icon" for="checkbox1"><span></span> Add to fav 1 </label> 
</span> 

<span class="add-to-bookmark add-btn"> 
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox2" value="2" name="checkbox-favorites"> 
<label class="add-to-favorites-checkbox-icon" for="checkbox2"><span></span> Add to fav 2 </label> 
</span> 

$('body').on('click','#checkbox2', function() {에서

Answer 1

사용 change 또한

check this post, prop vs attr

$(document).ready(function() { 
 

 
     /** 
 
     /* for first checkox we can see changed color, after checkox status is changed 
 
     /* for second checkbox attribute checked and prop is changed, but CSS is not recognizing it 
 
     **/ 
 

 
     // this is code for checkbox 1 - working 
 

 
     $('body').on('change', '#checkbox1', function (e) { 
 
      e.preventDefault(); 
 
      if ($(this).attr('checked')) { 
 
       console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked')); 
 
       return; 
 
      } 
 
      console.log("checkbox1 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked')); 
 
     }); 
 

 
     // this is code for checkbox 2 - css not working 
 
     $('body').on('change', '#checkbox2', function (e) { 
 
      e.preventDefault(); 
 
      if ($(this).attr('checked')) { 
 
       $(this).removeAttr('checked'); 
 
       $(this).prop("checked", false); 
 
       console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked')); 
 
       return; 
 
      } 
 
      $(this).attr('checked', 'checked'); 
 
      $(this).prop("checked", true) 
 
      console.log("checkbox2 status: " + $(this).attr('checked') + "=>" + $(this).prop('checked')); 
 
     }); 
 

 
    });

.add-to-favorites-checkbox[type="checkbox"] + .add-to-favorites-checkbox-icon span { 
 
     width: 16px; 
 
     height: 16px; 
 
     background-color: red; 
 
     display: block; 
 
    } 
 

 
    .add-to-favorites-checkbox[type="checkbox"]:checked + .add-to-favorites-checkbox-icon span { 
 
     background-color: green; 
 
     display: block; 
 
    } 
 

 
    input { 
 
     display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="add-to-bookmark add-btn"> 
 
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox1" value="1" 
 
     name="checkbox-favorites"> 
 
<label class="add-to-favorites-checkbox-icon" for="checkbox1"><span></span> Add to fav 1 </label> 
 
</span> 
 

 
<span class="add-to-bookmark add-btn"> 
 
<input class="add-to-favorites-checkbox js_bookmark-check" type="checkbox" id="checkbox2" value="2" 
 
     name="checkbox-favorites"> 
 
<label class="add-to-favorites-checkbox-icon" for="checkbox2"><span></span> Add to fav 2 </label> 
 
</span>