Question

在我的HTML页面上，我有几种形式。

他们都遵循一种模式：

每个表格都在一个名为"form-optional"
在此DIV内部是一个复选框，它包含在班级"form-enable"
实际表单的类别为"form-main"。

我想使用Jquery，这样当用户点击复选框时，“form-main”就会隐藏起来。但是，只应隐藏属于与单击的复选框相同的“form-optional”div的表单。所有其他形式应保持不变。

我知道您可以使用Jquery命令.parent()找到类的父级，然后将其与find()组合以查找该父级（）中的特定类。但是，当我使用这些命令时，它似乎不起作用。

这是我的Jquery：

// JavaScript Document
(function($)
{


$(document).ready(function(){

    $(".form-optional .form-enable input").click(function(){


        if(($this).attr('checked')){

            $(this).parent().find('.form-main').fadeIn();
        }

        else
        {
            $(this).parent().find('.form-main').fadeOut();
        }
    });
    });


})(jQuery);

这是我的HTML：

<div class="form-optional">
    <p class="form-enable">
        <input name="personaldetails" type="checkbox" value="">No Personal Details
    </p>
    <p class="form-explanation">If this product is a gift, you can tick the box, to omit the personal details</p>


    <form name="frmPersonal" class="form-main">

        Name:
        <input type="text" name="ordPersonalInfo1" value="" onkeyup="Restrict_Chars(this.form.ordPersonalInfo1,30);">

    </form>

</div>



<div class="form-optional">
    <p class="form-enable">
        <input name="friendsdetails" type="checkbox" value="">No Friends Details
    </p>
    <p class="form-explanation">If you have no friends, you can tick the box to omit friends</p>


    <form name="frmPersonal" class="form-main">

        Name:
        <input type="text" name="ordPersonalInfo1" value="" onkeyup="Restrict_Chars(this.form.ordPersonalInfo1,30);">

    </form>

</div>

Answer 1

复选框的父级是p元素，这就是你找不到表单元素的原因（你需要在checked属性上修复你的$ placement。你可以使用parents（）但是你必须指定您只需要第一个元素，否则它将应用于具有该类的所有元素。尝试：

   $(".form-optional .form-enable input").click(function(){
    if($(this).attr('checked')){
      $(this).closest('div').find('.form-main').fadeOut();
    }
    else
    {
       $(this).closest('div').find('.form-main').fadeIn();
    }
});

此外，我在我的示例中切换了订单，因为您想要在单击复选框时隐藏，而不是取消选中：

http://jsfiddle.net/8xrQe/5/

Answer 2

你需要这样做：

$(".form-optional .form-enable input").click(function () {
    if (($this).attr('checked')) {
        $(this).parents().find('.form-main').fadeIn();
    } else {
        $(this).parents().find('.form-main').fadeOut();
    }
});

由于.parent()方法只搜索DOM树的一个级别，但.parents()搜索到DOM树的顶级。

因此，当您使用.parent()方法时，它无法找到form-optional类div，因此您的代码无效。

Answer 3

因为form-main不是父元素的后代，所以它是复选框元素parent的兄弟。因此，基于您的标记的一种可能解决方案是找到form-optional元素，然后在其中找到form-main。

jQuery(function ($) {
    $(".form-optional .form-enable input").change(function () {
        if (this.checked) {
            $(this).closest('.form-optional').find('.form-main').fadeIn();
        } else {
            $(this).closest('.form-optional').find('.form-main').fadeOut();
        }
    }).change();
});

演示：Fiddle

Answer 4

使用.parents()，但为其指定选择器。

试试这个：

var enableInput = function()
{
    var checkbox = $("input[type='checkbox']");

    checkbox.click(function(){
        if ($(this).is(":checked")) {
            $(this).parents(".form-optional").find(".form-main").fadeIn();
        } else {
            $(this).parents(".form-optional").find(".form-main").fadeOut();
        }
    });
}
enableInput();

Example in JSFiddle

Answer 5

使用.next()：

给定一个表示一组DOM元素的jQuery对象， .next()方法允许我们搜索紧随其后的内容兄弟姐妹这些元素在DOM树中构建一个新的jQuery 来自匹配元素的对象。

Jquery：改变属于直接父级的特定兄弟类。

5 个答案: