Jquery-可重用复选框函数_Jquery_Html_Forms

Jquery-可重用复选框函数

jquery html forms

Jquery-可重用复选框函数,jquery,html,forms,Jquery,Html,Forms,我用有限的JQuery知识遇到了一堵墙，我使用了许多复选框： <input id="e_1" class="hiders" type="checkbox"> <label for="e_1">Hide Element 1</label> <input id="e_2" class="hiders" type="checkbox"> <label for="e_2">Hide Element 2<

我用有限的JQuery知识遇到了一堵墙，我使用了许多复选框：

    <input id="e_1" class="hiders" type="checkbox">
    <label for="e_1">Hide Element 1</label>

    <input id="e_2" class="hiders" type="checkbox">
    <label for="e_2">Hide Element 2</label>

    //Currently 6 of the above, with unique id's and shared class

所以我的问题是：我从哪里开始？我在哪里可以了解更多关于为类似的东西创建可重用函数的信息？或者，如果你真的想宠坏我，有什么可能的解决办法，或者暗示一下

谢谢你抽出时间，

Dragan

通过动态构造选择器，您可以同时针对所有元素：

$('input[id^="e_"]').change(function() {
    $('#' + this.id + '_div').toggle();
});

试试这个。。这样您就可以动态地触发它

$("input:checkbox").change(function(){
  $(this).next('div').toggle();
});

请找到下面的简单jquery脚本，它将完成所需的工作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle Checkbox</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $(".hiders").change(function(){
        var currentId = $(this).attr('id');
        var divId = currentId+"_div";
        $("#"+divId).toggle();
    });

});
</script>

</head>

<body>

<input id="e_1" class="hiders" type="checkbox" /><label for="e_1">Hide Element 1</label>

<input id="e_2" class="hiders" type="checkbox" /><label for="e_2">Hide Element 2</label>

<div id="e_1_div">element - 1</div>

<div id="e_2_div">element - 2</div>

</body>
</html>


切换复选框
$（文档）.ready（函数（）{
$（“.hiders”）.change（函数（）{
var currentId=$（this.attr（'id'）；
var divId=currentId+“_div”；
$（“#”+divId）.toggle（）；
});
});
隐藏元素1
隐藏元素2
要素-1
要素-2

我知道这很简单！，谢谢你，搅拌机@搅拌机-嘿，你能解释一下“输入[id^=“e_”]”规则吗？^=“e_u”是否意味着它以e_u开头，然后可以有任何内容？是的。看看jQuery（和CSS）。如果我是正确的，当前结构将不允许我使用next，因为包含复选框的“控制面板”不是div的同级，所以忘记指定了，抱歉！它在复选框附近吗？因为如果是，您可以使用它，您可以在next（）方法中指定元素。它是正常结构之外的一个div，在它自己的z索引上，关系（controlpanel div）类似于兄弟姐妹的孙子/孙女

$("input:checkbox").change(function(){
  $(this).next('div').toggle();
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle Checkbox</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $(".hiders").change(function(){
        var currentId = $(this).attr('id');
        var divId = currentId+"_div";
        $("#"+divId).toggle();
    });

});
</script>

</head>

<body>

<input id="e_1" class="hiders" type="checkbox" /><label for="e_1">Hide Element 1</label>

<input id="e_2" class="hiders" type="checkbox" /><label for="e_2">Hide Element 2</label>

<div id="e_1_div">element - 1</div>

<div id="e_2_div">element - 2</div>

</body>
</html>