Jquery 访问重嵌套输入

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 开始，看看它是否可以找到并输入选中的属性。这里似乎什么都没发生

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

第二次尝试我也在尝试使用跨度 class 一层，然后找到一个输入。一旦它找到一个，它就会检查它是否被检查过。 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 中的 </code> space：</p> <pre><code><div id="chargeRequest ">

改为：

<div id="chargeRequest">

在下面的测试中找到它。

if ($('#chargeRequest').find('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" checked>
                    <span class="wpcf7-list-item-label">yes
                    </span>
                </span>
            </span>
        </span>
    </p>
</div>

Answer 2

您的第一次尝试应该可以，只有一件事，从 id 中删除 space。

<div id="chargeRequest "> 应该是 <div id="chargeRequest">

您也可以select这样输入：

 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 访问重嵌套输入

Jquery Accessing Heavily Nested Input

html

jquery

alert

nested

contact-form-7

尝试次数