Question

我有一个复选框列表，如果没有选中任何后续框，则必须选择第一个复选框，如果选中以下任何一个框，则必须取消选中第一个框。

我还想确保用户可以通过单击框右侧的图像来选择复选框（两者都在相同的“li”中）。

如果用户选择第一个复选框，我还希望取消选择第一个下面的所有复选框。

我在Textmate和Chrome中都能正常运行。在Firefox（第26节）中唯一不起作用的是当用户直接点击第一个“li”的复选框时的部分。他们可以点击它右侧的跨度，将选中复选框，然后取消选择后续框，但我真的希望该单击在框中也可以使用！

感谢您对此的帮助！

CSS：

input[type='checkbox'] {
    position:relative;
}

.stars {
    border:0px solid red;
    width:70%;
    vertical-align: bottom;
    margin: 10px 0 0 3px;
    padding-bottom: 3px;
    box-shadow: none;
    font-size:14px;
}

.rating {
    width:70%;
    vertical-align: bottom;
    margin: 10px 0 -5px 3px;
    box-shadow: none;
    font-size:14px;
}

.highlight {
    background-color:rgb(63, 130, 255);
    border: 0px solid rgb(63, 130, 255);
    border-radius:10px;
    top:-10px;
}

.starRating {
    color:transparent;
}

.star-ratings ul, .star-ratings li {
    list-style-type: none;
    margin: 0 0 0 -30px;
}

.sub {
    border:1px solid #cccccc;
    width:40%;
}

HTML：

<div class="sub sub2">
<ul class="star-ratings">
    <li>
        <input type="checkbox" class="checkbox" id="S0" checked> <span class="stars">All (includes unrated)
                                <br><br>
                            <li><input type="checkbox" class="checkbox S1"> <img class="stars" src="http://leangreenmovingmachine.com/upload/5-Star.png">
                            <li><input type="checkbox" class="checkbox S2"> <img class="stars" src="http://leangreenmovingmachine.com/upload/4-Star.png">
                            <li><input type="checkbox" class="checkbox S3"> <img class="stars" src="http://leangreenmovingmachine.com/upload/3-Star.png">
                            <li><input type="checkbox" class="checkbox S4"> <img class="stars" src="http://leangreenmovingmachine.com/upload/2-Star.png">
                            <li><input type="checkbox" class="checkbox S5"> <img class="stars" src="http://leangreenmovingmachine.com/upload/1-Star.png">
                        </ul>
                    </div>

                                <br><br>

<div class="sub sub3" >
<ul class="star-ratings">
    <li>
        <input type="checkbox" class="checkbox" id="R0" checked> <span class="stars">All (includes unrated)
                                <br><br>
                            <li><input type="checkbox" class="checkbox R1"> <img class="rating" src="http://leangreenmovingmachine.com/upload/Star%20Rating%20FIVE.png">
                            <li><input type="checkbox" class="checkbox R2"> <img class="rating" src="http://leangreenmovingmachine.com/upload/Star%20Rating%20FOUR.png">
                            <li><input type="checkbox" class="checkbox R3"> <img class="rating" src="http://leangreenmovingmachine.com/upload/Star%20Rating%20THREE.png">
                            <li><input type="checkbox" class="checkbox R4"> <img class="rating" src="http://leangreenmovingmachine.com/upload/Star%20Rating%20TWO.png">
                            <li><input type="checkbox" class="checkbox R5"> <img class="rating" src="http://leangreenmovingmachine.com/upload/Star%20Rating%20ONE.png">
                        </ul>
                    </div>

jQuery的：

$(".star-ratings").on("mouseover", ".stars, .rating", function () {
    $(this).addClass("highlight");
});

$(".star-ratings").on("mouseout", ".stars, .rating", function () {
    $(this).removeClass("highlight");
});

$('.star-ratings').on('click', '.stars, .rating', function () {
    if ($(this).closest('li').find(':checkbox').is(':checked')) {
        $(this).closest('li').find(':checkbox').prop('checked', false);
        if (!$(this).closest('.star-ratings').find('li').find(':checkbox').is(':checked')) {
            $(this).closest('.star-ratings').find(':checkbox:first').prop('checked', true);
        }
    } 
    else {
        $(this).closest('li').find(':checkbox').prop('checked', true);
        $(this).closest('.star-ratings').find(':checkbox:first').prop('checked', false);
    }

});


$('.star-ratings').change(':checkbox', function () {
    if ($(this).find(':checkbox').is(':checked')) {
        $(this).closest('.star-ratings').find('li:first').find(':checkbox').prop('checked', false);
    } 
    else {
        $(this).closest('.star-ratings').find(':checkbox:first').prop('checked', true);
    }
});

$('.star-ratings').on("click", ".stars:first", function () {
    if (!$(this).closest('li').find(':checkbox').is(':checked')) {
        $(this).closest('li').find(':checkbox').prop('checked', true);
        $(this).closest('li').siblings().find(':checkbox').prop('checked', false);
    }
});

$(".star-ratings").on('click', ':checkbox:first', function () {
    if (!$(this).closest('li').find(':checkbox').is(':checked')) {
        $(this).closest('li').find(':checkbox').prop('checked', true);
        $(this).closest('li').siblings().find(':checkbox').prop('checked', false);
    }
});

$('.star-ratings').on("click", "#R0", function () {
    if (!$(this).closest('li').find(':checkbox').is(':checked')) {
        $(this).closest('li').find(':checkbox').prop('checked', true);
        $(this).closest('li').siblings().find(':checkbox').prop('checked', false);
    }
});

复选框在chrome中工作不在firefox中工作

0 个答案: