Question

我对jQuery世界很陌生，所以我希望得到一些帮助。

我正在创建一个页面，其中包含一个div，里面有许多复选框。

这些复选框中的每一个都包含在它们自己的div中。

<div>
    <div>  
        <input type='checkbox' name='cb1' />
        <div id="info1">
            Hide
        </div>  
    </div>  
    <div>  
        <input type='checkbox' name='cb2' />
        <div id="info2">
            Hide
        </div>  
    </div>  
</div>

我需要编写一个jQuery函数，只要单击复选框（cb1或cb2）隐藏/显示相应的“info”div（info1或info2），就能捕获。

我将有100多个复选框，所以我希望有一种方法可以做到这一点，而无需为click（）编写100多个函数。

谢谢，
标记

Answer 1

使用目标项上的类并遍历DOM而不是使用特定ID会更容易：

<input class='check' type='checkbox' name='cb1' />
<div id="info1">
Hide
</div>



$('.check').click(function(){
    $(this).next().toggle()
})

Answer 2

这会在name a .change() handler cb的所有复选框上放置attribute starts with。

当发生更改时，它会遍历the .next() element兄弟，calls .toggle()，根据是否选中该复选框显示/隐藏。

使用HTML的示例： http://jsfiddle.net/fWYtv/

$('input:checkbox[name^=cb]').change(function() {
    $(this).next().toggle( this.checked );
});

修改

由于您声明会有超过100个，因此使用.delegate()会更好，所以您只有一个处理程序而不是100个。

将主<div>作为所有内容的容器，并为其提供container之类的ID，以便最终得到：

<div id='container'> <div> <input type='checkbox' name='cb1' /> <div ...

然后call .delegate()，并将input设置为事件的目标。

像这样：

示例： http://jsfiddle.net/fWYtv/1/

$('#container').delegate('input:checkbox[name^=cb]', 'change', function() { $(this).next().toggle( this.checked ); });

这将是很多更有效的方式。

Answer 3

试试这个：

$("input[type=checkbox]").change(function() {
    var checkID = $(this).attr('name').substr(2);
    $("#info" + checkID).slideToggle("slow");
});

如果最初取消选中某个复选框，则其信息div上应声明display: none;。

希望这有帮助！

Answer 4

$("input[type=checkbox]").click(function(){
  if ( this.checked )
    $(this).next("div").show();
  else
    $(this).next("div").hide();
});

Answer 5

如果您有大量复选框，请考虑在其共同祖先上使用delegate，因为它比设置数百个事件处理程序要快得多。

从不同的元素调用jQuery函数

5 个答案: