Jquery Accessing Heavily Nested Input

Question

I am trying to access an input that is heavily nested within a group of <span></span> and a <p></p>. I cannot change the way it is nested so the only thing I can do is try to find a way to access it. below is the way my code is nested. (cannot be changed). inb4 my JQuery is enabled I have done some test alerts beforehand.

<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>

---

Attempts

I am trying to get the JQuery to throw a simple alert when the check box is ticked but I cannot seem to access it. Below are the things I have tried

The first example I was going off the outermost div and seeing if it could find and input with the property of checked. Nothing seemed to happen here

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

The second attempt i was using the span class one layer in too try and then find an input. once it ahd found one it checked if it was checked. Nopthign happened here also.

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

The third attempt I got despererate and tried to do a large nesting chain. This did not work see below 2 attempts at nesting.

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

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

the method above I also tried .prop() and it ried both without the >

Answer 1

your first try should work, just one thing, remove the space from id.

<div id="chargeRequest "> should be <div id="chargeRequest">

Also you can select input like this:

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

see the 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>