Question

现在，当我点击li时，它会被正确突出显示。但是，当我点击复选框本身时，没有回复。点击li 或 li本身时，如何突出显示/取消突出显示checkbox？

我也不想调整jQuery的这一部分：$('.rightP').find('ul').on(（因为ul中的元素是动态生成），如果可能的话。

HTML

<div class = "rightP">
    <ul>
        <li>
            <div class="sender">
                <span>
                      <input type="checkbox">
                </span>
            </div>
            <div id=2 class="message">
                 <p>test</p>
            </div>
            ...
        </li>
        ...
    </ul>
    ...
</div>

JQuery：

deleteIDs = [];
$('.rightP').find('ul').on("click","li",function(event) {

    var checkbox = $(this).find("input[type='checkbox']");

    if(checkbox.hasClass('open')){
        if(!checkbox.prop("checked") ){
            checkbox.prop("checked",true);
            $(this).css({'background-color':"#EEEEEE"});
            $(this).find('div.message').each(function(){
                deleteIDs.push($(this).prop('id'));
            });
        } else {
            checkbox.prop("checked",false);
            $(this).css({'background-color':"white"});
            $(this).find('div.message').each(function(){
                var deleteID = $(this).prop('id');
                deleteIDs = $.grep(deleteIDs,function(value){
                    return (value!=deleteID);
                });
            });
        }
    }
});

Answer 1

我想如果你想处理li点击。您不能使用复选框。您在没有点击时点击和noclick.png进行映像并将其更改为click.png。希望这有帮助！

好的，如果你不想要图像我提到你我的完整代码没有使用图像，它工作正常

<!DOCTYPE html >
<html >
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

</head>


<body>
<div class = "rightP">
    <ul>
        <li>
            <div class="sender">
                <span>
                      <input type="checkbox">
                </span>
            </div>
            <div id=2 class="message">
                 <p>test</p>
            </div>

        </li>

    </ul>

    <script>
     deleteIDs = [];
     var isnotcheck=true;
      var clickcheckbox=false;
    $('.rightP').find('ul').on("click","input",function(event) {
          clickcheckbox=true;
          isnotcheck=!isnotcheck;
        });
$('.rightP').find('ul').on("click","li",function(event) {
    ;
        if(!clickcheckbox)
        {
         isnotcheck=!isnotcheck;
        }
        var checkbox = $(this).find("input[type='checkbox']");
        clickcheckbox=false;
        if(!isnotcheck ){
            checkbox.prop("checked",true);
            $(this).css({'background-color':"#EEEEEE"});
            $(this).find('div.message').each(function(){
             deleteIDs.push($(this).prop('id'));

            });
        } else {
            //alert(checkbox);
            checkbox.prop("checked",false);
            $(this).css({'background-color':"white"});
            $(this).find('div.message').each(function(){
                var deleteID = $(this).prop('id');

                deleteIDs = $.grep(deleteIDs,function(value){
                    return (value!=deleteID);
                });
            });

    }
});

</script>
</div>
</body>
</html>

你看两个事件。 li单击并复选框单击，如果单击复选框，则发生两个事件，如果没有发生任何事件。你可以看到我的变量

var isnotcheck=true;
var clickcheckbox=false;

知道点击与否单击复选框。希望这有帮助！

Answer 2

而不是这一行

$('.rightP').find('ul').on("click","li",function(event) {

你可以尝试

$('.rightP').on("click","ul li",function(event) {

Answer 3

当您处理生成的内容时，您应该使用延迟事件处理程序，这是使用Jquery UI在单击复选框或div时应用高亮效果的示例。

http://jsbin.com/kibicega/1/

如果单击复选框或单击它的父div，如何突出显示/取消突出显示div？

3 个答案: