Question

我在本网站的另一篇文章中发现了这个代码，因此您可以点击div中的任意位置，并勾选复选框。

以下是我找到的代码，但我通过给它id

更改了它

<label for="cb">
     <div id="clickablediv">
         <input name="cb" id="cb" type="checkbox">
     </div>
</label>

Link to original question.

我想通过添加一些java脚本来扩展这个问题/答案，所以当点击div时它会淡出div一点点，这样你就可以告诉它已被点击，如果再点击它然后它去了原来的样子。我想也许是一个灰色的颜色添加透明度，所以你一旦点击它仍然可以看到下面的div。

这是一个jsFiddle link HTML和一些CSS，以便为div提供一些内容，这些内容会在点击时变得迟钝。

我目前在我的网站上使用jquery 1.11.0所以如果使用jquery，请确保它适用于1.11.0

Answer 1

你可以使用一些CSS3过渡来淡化颜色和jquery的.is(":checked")来完成这个编辑：没有看到关于点击div，更新小提琴和代码的部分

$("#clickablediv").click(function(){
 if($("#cb").is(":checked")){
   $("#clickablediv").css({"background":"rgba(0,0,0,.4)"});
 }else{
   $("#clickablediv").css({"background":"#0b61a4"});
 }
});

JSFIDDLE

Answer 2

您可以使用简单的.click事件处理程序检查复选框的状态：

$("#clickablediv").click(function(){
    if($(this).children("#cb")[0].checked){
        $(this).css({backgroundColor:"#389BE8"})   
    }else{        
        $(this).css({backgroundColor:"#0b61a4"}) 
    }
});

jsFiddle说明了答案。

正如jmore009建议的那样，一定要考虑使用CSS3过渡，以便为颜色变化设置动画。

Answer 3

以下是动画的不透明度渐变：FIDDLE

$('#clickablediv').click(function () {
    if ($(this).find('#cb').is(':checked')) {
        $(this).animate({
            opacity: 0.5
        }, 250);
    } else {
        $(this).animate({
            opacity: 1
        }, 250);
    }
});

Answer 4

你可以将yur的不透明度复选框设置为1，然后使用.animate（）将其设置为幻灯片，如下所示：

$('#cb').animate({opacity:0.3}, 500);

然后设置一个变量以保持点击复选框的状态。 JsFiddle：http://jsfiddle.net/4xByj/5/ 它与jquery 1.11.0兼容

div复选框在点击时变暗

4 个答案: