Question

我正在尝试访问大量嵌套在<span></span>和<p></p>组中的输入。我无法改变它的嵌套方式，所以我唯一能做的就是尝试找到一种方法来访问它。下面是我的代码嵌套的方式。（不能改变）。 inb4我的JQuery已启用我事先已经完成了一些测试警告。

<div id="chargeRequest ">
    <p>Chargeable Request - If selected fill section below<br>
        <span class="wpcf7-form-control-wrap checkbox-397">
            <span class="wpcf7-form-control wpcf7-checkbox">
                <span class="wpcf7-list-item first last">
                    <input type="checkbox" name="checkbox-397[]" value="yes">
                    <span class="wpcf7-list-item-label">yes
                    </span>
                </span>
            </span>
        </span>
    </p>
</div>

尝试

我正在尝试让JQuery在勾选复选框时抛出一个简单的警报，但我似乎无法访问它。以下是我尝试过的事情

第一个例子我离开了最外面的div，看看它是否可以找到并输入checked属性。这里似乎没有发生任何事情

if ($('#chargeRequest').find('input').prop('checked')) {
    alert('test');
}

第二次尝试我正在使用span类一层，然后找到一个输入。一旦它找到一个它检查是否被检查。 Nopthign也发生在这里。

if ($('.checkbox-397').find('input')) {
    if (this.is('checked')) {
        alert('test');
    }
}

第三次尝试我绝望了，并试图做一个大型的嵌套链。这不起作用，见下面的2次嵌套尝试。

if ($('#chargeRequest>p>span>span>input:checked')) {
        alert('test');
    }
}

if ($('#chargeRequest>p>span>span>input').is(':checked')) {
        alert('test');
    }
}

上面的方法我也试过了.prop()并且没有>

Answer 1

我认为问题是标记中选择器ID的空格：

<div id="chargeRequest ">

将其更改为：

<div id="chargeRequest">

在下面的测试中找到它。

＆＃13;

if ($('#chargeRequest').find('input').prop('checked')) {
    alert('test');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chargeRequest">
    <p>Chargeable Request - If selected fill section below<br>
        <span class="wpcf7-form-control-wrap checkbox-397">
            <span class="wpcf7-form-control wpcf7-checkbox">
                <span class="wpcf7-list-item first last">
                    <input type="checkbox" name="checkbox-397[]" value="yes" checked>
                    <span class="wpcf7-list-item-label">yes
                    </span>
                </span>
            </span>
        </span>
    </p>
</div>

＆＃13;

Answer 2

你的第一次尝试应该有效，只需一件事，从id中删除空格。

<div id="chargeRequest ">应为<div id="chargeRequest">

您也可以选择这样的输入：

 if ($('#chargeRequest input').prop('checked')) {
    alert('test');
}

请参阅Fiddle

$('input').click(function() {

  if ($('#chargeRequest input').prop('checked')) {
    alert('test');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chargeRequest">
  <p>Chargeable Request - If selected fill section below
    <br>
    <span class="wpcf7-form-control-wrap checkbox-397">
            <span class="wpcf7-form-control wpcf7-checkbox">
                <span class="wpcf7-list-item first last">
                    <input type="checkbox"  name="checkbox-397[]" value="yes" />
                    <span class="wpcf7-list-item-label">yes
                    </span>
    </span>
    </span>
    </span>
  </p>
</div>

Jquery访问重型嵌套输入

尝试

2 个答案: