Добавить CSS в родительский div после проверки флажка в jQuery

Question

У меня есть div со скрытым флажком внутри. Когда вы щелкаете в любом месте div, он должен поставить галочку/снять флажок, а также добавить css в div.

Это работает, однако он не будет работать при первом щелчке. После этого все в порядке.

Любые идеи?

$(".panel").on('click', function() { 
 

 
    var check = $(this).find(':checkbox'); 
 

 
    if (check.prop('checked') == true) { 
 
    check.prop('checked', false); 
 
    $(this).css('opacity', '1'); 
 
    } else { 
 
    check.prop('checked', true); 
 
    $(this).css('opacity', '0.2'); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-4"> 
 
    <div class="panel"> 
 
    <hr> 
 
    <input class="check" type="checkbox" name="todo[]" value="1"> 
 
    </div> 
 
</div>

Answer 1

Вы можете использовать .click() на флажке пузырька мыши.

$(":checkbox").click(function(event){ 
 
    event.stopPropagation(); 
 
    if($(this).prop('checked') == true){ 
 
     $(".panel").css('opacity', '1'); 
 
    }else{ 
 
     $(".panel").css('opacity', '0.2'); 
 
    } 
 
}); 
 

 
$(".panel").on('click', function(){ 
 
    $(":checkbox").click(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-4"> 
 
    <div class="panel"> 
 
     <hr> 
 
     <input class="check" type="checkbox" name="todo[]" value="1"> 
 
    </div>  
 
</div>

Answer 2

Это отлично работает для меня. Это странно.

Может быть, вы можете попробовать с готовым:

$(document).ready(function() { 
// Put your code here 
}); 

Answer 3

Кажется, вы могли бы пытаться использовать по щелчку до загрузки DOM?

возможно попробовать:

$(document).on("click", ".panel", function(e){ 
    var check = $(this).find(':checkbox'); 

    if(check.prop('checked') == true){ 
     check.prop('checked', false); 
     $(this).css('opacity', '1'); 
    } else { 
     check.prop('checked', true); 
     $(this).css('opacity', '0.2'); 
    } 
} 

Или вы можете просто положить сценарий после HTML до конца вашего тела тега?

Или используйте $ (document) .ready (function() {....});

или функция auto invoked like; (function() {}); и т.д ...

Answer 4

Вам просто нужно инициализировать нужного CSS для состояния нагрузки либо с классом или обычной CSS - Вот решение, используя классы вместо того, чтобы просто CSS дайте мне знать, если это полезно

Используя документ готов гарантирует, что ваш код не будет работать, пока не после того, как все элементы DOM существует, вы можете прочитать больше о нем here

$(document).ready(function() { 
 
    $(".panel").on('click', function() { 
 

 
    var check = $(this).find(':checkbox'); 
 

 
    if (check.prop('checked') == true) { 
 
     check.prop('checked', false); 
 
     $(this).removeClass('dim'); 
 
    } else { 
 
     check.prop('checked', true); 
 
     $(this).addClass('dim'); 
 
    } 
 
    console.log(check.prop('checked')); 
 
    }); 
 

 
})

.hide { 
 
    display: none; 
 
} 
 
.dim { 
 
    opacity: 0.2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-4"> 
 
    <div class="panel"> 
 
    <hr> 
 
    <input class="check hide" type="checkbox" name="todo[]" value="1">There is a hidden check box here 
 
    </div> 
 
</div>