Question

我有一个带有隐藏复选框的div。当你点击div中的任何地方时，它应勾选/取消勾选复选框，并在div中添加一些css。

它有效，但它不会在第一次点击时工作。之后很好。

有什么想法吗？

＆＃13;

$(".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');
  }

});

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用复选框上的.click（）来冒泡点击。

＆＃13;

$(":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();
});

＆＃13;

<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>

＆＃13;

Answer 2

这对我来说非常合适。这很奇怪。

也许你可以试一试：

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

Answer 3

似乎你可能在加载DOM之前尝试使用on;

也许试试：

with t(id,type) as (values
    (1,1),(2,1),(3,1),(4,1),(5,2),(6,2),(7,2),(8,3),(9,4)
), dt as (
    select type, id
    from t
    group by 1,2
    order by random()
    limit 1
)
select
    type as chosen_type,
    (select count(distinct type) from t) as type_count,
    id as chosen_id,
    (select count(distinct id) from t where type = dt.type) as id_count
from dt;
 chosen_type | type_count | chosen_id | id_count 
-------------+------------+-----------+----------
           2 |          4 |         6 |        3

或者您可以简单地将脚本放在HTML标记结束前的HTML之后？

或者使用$（document）.ready（function（）{....}）;

或自动调用的函数，如;（function（）{}）;等...

Answer 4

您只需要使用类或常规css初始化所需的css以获取加载状态 - 这是一个使用类而不仅仅是css的解决方案让我知道它是否有用

使用文档就绪可确保您的代码在所有dom元素存在之后才会运行，您可以阅读更多相关内容here

＆＃13;

$(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'));
  });

})

＆＃13;

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

＆＃13;

<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>

＆＃13;

在jQuery

4 个答案: