jQuery, change class text of checked checkboxes

My HTML is generated by the website and I can't change this:

<div>
    <span class="wrapper">
        <input type="checkbox" value="" id="nr1" name="X"> 
        <label for="X">
            <span class="Y">
                <span class="title">Text nr 1</span>
            </span>
        </label>
    </span>
</div>

I'm trying to use jQuery to change the text in <span class="title"> when checkbox id=nr1 is checked. (I have many of these checkboxes with different IDs and different texts and I want to change the text always to the same outcome when the box is checked.

I have made this jQuery code:

$('#submit').on("click", function(){
   $("input:checkbox(:checked)").each(function() {
      $(this).find( $(".title").text("Checked"));
   });  
});

But it doesn't seem to select the correct object as I can't get the output back correctly. it seems to do "nothing" (I can't enable errors in the system I'm working on so I can't see why it would not work).

Can someone point me in the right direction?

You need to include .next(), as .find() searches descendants, and the span isn't a descendant of the checkbox, but it is a descendant of the next element in the DOM.

Also, the proper selector syntax for your example is $("input:checkbox:checked"), not $("input:checkbox(:checked)")

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('#submit').on("click", function() {
  $("input:checkbox:checked").each(function() {
    $(this).next().find($("span.title")).text("Checked");
  });
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <span class="wrapper">
        <input type="checkbox" value="" id="nr1" name="X"> 
        <label for="nr1">
            <span class="Y">
                <span class="title">Text nr 1</span>
            </span>
        </label>
    </span>
</div><div>
    <span class="wrapper">
        <input type="checkbox" value="" id="nr2" name="X"> 
        <label for="nr2">
            <span class="Y">
                <span class="title">Text nr 1</span>
            </span>
        </label>
    </span>
</div><div>
    <span class="wrapper">
        <input type="checkbox" value="" id="nr3" name="X"> 
        <label for="nr3">
            <span class="Y">
                <span class="title">Text nr 1</span>
            </span>
        </label>
    </span>
</div>

<button id="submit">
submit
</button>

<!-- end snippet -->

Note that the label's for attribute should match the ID of another element, not the name.

> The value of the for attribute must be a single id for a labelable
> form-related element in the same document as the <label> element

At a glance I see two issues:

1. This doesn't make much sense as a find operation: $(this).find( $(".title").text("Checked"));
2. Even when corrected, you won't find .title within input:checkbox(:checked) because it's not a child of that element.

The first issue is just more familiarity with jQuery syntax and functions. The second requires an understanding of DOM traversal. Rather than looking within the checkbox element, traverse up to a common parent (e.g. span.wrapper) then then find the target within that element.

For example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$('#submit').on("click", function(){
   $("input:checkbox(:checked)").each(function() {
      $(this).closest('.wrapper').find('.title').text('Checked');
   });  
});

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <span class="wrapper">
        <input type="checkbox" value="" id="nr1" name="X"> 
        <label for="X">
            <span class="Y">
                <span class="title">Text nr 1</span>
            </span>
        </label>
    </span>
</div>
<button id="submit">Submit</button>

<!-- end snippet -->