的 HTML

<input type="checkbox" id="carousel" class="carouselGlobal" name="aisis_options[carousel_global]" value="carousel_global">

简单的复选框。现在让我们添加一些jquery来显示一个隐藏的部分，div类为.sectionCarousel

的的jQuery

    $('.carouselGlobal').click(function(){
        if ($(this).attr("id") == "carousel"){
            $('.sectionCarousel').show();
        } else {
            $('.sectionCarousel').hide();
        }
    });

这很容易，你点击，你看，你点击了，你看不到..... 错误

问题

如果我使用上面的代码单击复选框以显示它显示的隐藏部分，如果我再次单击复选框以取消选中该项目仍然存在。

所以现在如果我们保存表单，我们假设在页面刷新时保持选中复选框，我们需要保持显示部分，以便我们这样做：

的的jQuery

    if ($('input[value=carousel_global]:checkbox:checked').attr('id') === "carousel") {
        $('.sectionCarousel').show();
    }

它的功能非常简单。

此处再次重复第一个问题，如果单击复选框取消选中，则该部分仍会显示。但是，如果此时保存表单，则该部分将消失，直到再次单击该复选框为止。

正如您所看到的，这可能成为一个问题。

所以我问你：

表格保存前

当我单击复选框时，隐藏部分应显示，当我再次单击它取消选中时，它应该会消失。

表单保存后

假设在页面刷新时单击了复选框，该部分应保持可见，如果我单击复选框以取消选中它，则内容（在本例中为该部分）应该消失。

单击以显示作品，取消选中并且它（该部分）消失 - 不起作用。为什么呢？

Answer 1

如果必须使用绑定到一组元素的click事件，则还需要检查选中的状态，类似于：

$('.carouselGlobal').click(function(){
    var $this = $(this);
    var theId = this.id;

    if (theId === "carousel"){
        if($this.is(":checked")){
            $('.sectionCarousel').show();
        } else {
            $('.sectionCarousel').hide();
        }
    }
});

DEMO - 添加状态检查

修改

你的代码片段一直有效，直到我提交表格，然后再写下来仍然单击复选框但隐藏了部分div 不应该。

您可以通过将代码分开来解决此问题：

var setSectionCarouselState = function (showIt) {
    if (showIt) {
        $('.sectionCarousel').show();
    } else {
        $('.sectionCarousel').hide();
    }
}

$('.carouselGlobal').click(function () {
    var $this = $(this);
    var theId = this.id;

    if (theId === "carousel") {
        setSectionCarouselState($this.is(":checked"));
    }
});

setSectionCarouselState($('#carousel').is(":checked"));

DEMO - 分开代码

上面的代码不适用于复制粘贴，因为它在jsFiddle的隔离环境中工作，但可能需要进行微调，才能使其在您的特定环境中工作。

修改

如果我有6或7个，显然不同的id和类是有一个简单的方法来处理它们或我会写出一些东西类似于这个答案，每一个？

我不是100％确定你的设置是怎样的，但假设你有多个checkboxes 显示/隐藏1对1的另一个元素或选择器。您可以编写更通用的解决方案。

一种选择是使用data-attribute方法，在其中为每个checkbox分配它认为有效的选择器。这样也会使id属性的使用变得多余。

假设你有类似这样的HTML：

<input type="checkbox" class="carouselGlobal">
<input type="checkbox" class="carouselGlobal" data-target-selector=".anotherSectionCarousel">
<input type="checkbox" class="carouselGlobal" data-target-selector=".sectionCarousel" checked>

<div class="sectionCarousel" style="display:none;">section carousel</div>
<div class="anotherSectionCarousel" style="display:none;">another section carousel</div>

如上所示，每个checkbox都有一个data-target-selector属性，其中包含了它想要生效的元素的选择器。

您的脚本现在变得非常小：

// method which takes in the DOM reference of a checkbox
// interrogates the data attribute and uses it
// to show/hide the matching element
var setTargetState = function (checkbox) {
    var $this = $(checkbox);
    var $target = $($this.attr('data-target-selector'));

    if(!$target.length){
        return;
    }

    if ($this.is(":checked")) {
        $target.show();
    } else {
        $target.hide();
    }
}

// click event drastically simplified
$('.carouselGlobal').click(function () {
    setTargetState(this);
});

// iterates through all checkboxes ensureing the initial state is applied
$('.carouselGlobal').each(function(){
    setTargetState(this);
});

DEMO - 使用数据属性，例如

Answer 2

<强> jsFiddle Demo

考虑使用切换，并使用id定位复选框，如下所示：

$("#carousel").click(function(){$('.sectionCarousel').toggle();});

Answer 3

试试这个：

$('#carousel').click(function(){
    if( $(this).is(':checked') ){
        $('.sectionCarousel').show();
    }else{
        $('.sectionCarousel').hide();
    }
});

并且您希望在$(document).ready()函数中包含此内容：

if($('#carousel').is(':checked')){
    $('sectionCarousel').show();
else{
    $('sectionCarousel').hide();
}

jquery没有按照我的预期行事

的 HTML

的的jQuery

的的jQuery

3 个答案: