0

在我的 HTML 页面上，我有几个表单。

他们都遵循一个模式：

  1. 每个表单都在一个名为的 div 中"form-optional"
  2. 在这个 DIV 里面是一个复选框，它被包装在类中"form-enable"
  3. 实际形式有一个类"form-main"。

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

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

JSFIDDLE 在这里

这是我的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>
4

5 回答 5

1

使用.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();

JSFiddle 中的示例。

于 2013-10-24T10:32:38.430 回答
1

这是因为form-main不是父元素的后代，它是复选框元素父元素的兄弟。因此，基于您的标记的一种可能解决方案是找到 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();
});

演示：小提琴

于 2013-10-24T10:26:08.333 回答
1

复选框的父元素是p元素，这就是为什么您没有找到表单元素的原因（并且您需要在选中的属性上修复 $ 位置。您可以使用 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/

于 2013-10-24T10:20:14.607 回答
1

你需要这样做：

$(".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，因此您的代码无法正常工作。

于 2013-10-24T10:20:48.390 回答
0

使用.next()：

给定一个表示一组 DOM 元素的 jQuery 对象，该 .next()方法允许我们在 DOM 树中搜索这些元素的紧随其后的兄弟元素，并从匹配的元素构造一个新的 jQuery 对象。

于 2013-10-24T10:19:58.627 回答