爲什麼我的jQuery不活？

Question

我有這個jQuery腳本。當我檢查snow[enabled]複選框時，它不會顯示#overlay div。它只檢查頁面加載...

(function($) { 
    $(function() { 
     $('.color-field').wpColorPicker(); 
     $('#TB_window').draggable(); 
    }); 
    $(function() { 
     if ($("#image-url").filter(function() { return $(this).val(); }).length > 0) { 
      $("#has-image").show(); 
     } 
     if(document.getElementById('snow[enabled]').checked) { 
      $("#overlay").show(); 
     } else { 
      $("#overlay").hide(); 
     } 
    }); 
})(jQuery); 

我該如何讓這個生活？所以，即使在頁面加載檢查後，如果snow[enabled]被選中，如果是這樣顯示div？

Answer 1

查看jQuery API中:checked選擇器的示例，其中顯示瞭如何綁定複選框的click事件上的函數，以查看它是選中還是未選中。

https://api.jquery.com/checked-selector/

<script> 
var countChecked = function() { 
    var n = $("input:checked").length; 
    $("div").text(n + (n === 1 ? " is" : " are") + " checked!"); 
}; 
countChecked(); 

$("input[type=checkbox]").on("click", countChecked); 
</script> 

Answer 2

您需要onchange事件的複選框綁定。

然後您可以簡單地切換覆蓋。

$('input#snow').on('change', function() { 
    $("#overlay").toggle(); 
}); 

OR

如果其他條件取決於複選框是否被選中與否，以獲得更可靠的結果，您可以使用。

$('input#snow').change(function() { 
    if ($(this).prop("checked")) { 
     $("#overlay").show(); 
    } else { 
     $("#overlay").hide(); 
    } 
});