Javascript相当于php for loop效率

first time posting so I apologize if I miss something obvious here.

What I am trying to do is pretty simple....in php. I can do it in my sleep. However, my page requires an integration of javascript, which I am not particularly skilled in yet.

I have a question about a working portion of the script, that I would like to make more efficient.

Question: I have a series of checkboxes that a user will 'check' if they have done something. Javascript works just fine, but I need to use a loop so my brain doesn't hurt from all the unnecessary lines of code.

Here's the bulky ugly stuff:

$("#M1L1Box").click(function() {
  $("#M1L1BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});

$("#M1L2Box").click(function() {
  $("#M1L2BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});

$("#M1L3Box").click(function() {
  $("#M1L3BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});

$("#M1L4Box").click(function() {
  $("#M1L4BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});

$("#M1L5Box").click(function() {
  $("#M1L5BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});

$("#M1L6Box").click(function() {
  $("#M1L6BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});

$("#M1L7Box").click(function() {
  $("#M1L7BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});

$("#M1L8Box").click(function() {
  $("#M1L8BoxFeedback").text(this.checked ? "- completed" : "- mark as complete");
});

And here's ONE version of what I have tried in my hours of wasting time to make this efficient:

  for(i=1; i<=8; i++){

  var checkBoxCode = "#M1L" + i +"Box";
  var feedbackCode = "#M1L" + i + "BoxFeedback";

  $(checkBoxCode).click(function() {
    $(feedbackCode).text(this.checked ? "- completed" : "- mark as complete");
  });
}

Sorry, here is the html:

<input type="checkbox" id="M1L1Box" class="checkbox1" value="M1L1">
<label for="M1L1Box" id="M1L1Label"> - Module 1 Lesson 1 <span id="M1L1BoxFeedback"></span></label><br>

<input type="checkbox" id="M1L2Box" class="checkbox1" value="M1L2">
<label for="M1L2Box" id="M1L2Label"> - Module 1 Lesson 2 <span id="M1L2BoxFeedback"></span></label><br>

<input type="checkbox" id="M1L3Box" class="checkbox1" value="M1L3">
<label for="M1L3Box" id="M1L3Label"> - Module 1 Lesson 3 <span id="M1L3BoxFeedback"></span></label><br>

<input type="checkbox" id="M1L4Box" class="checkbox1" value="M1L4">
<label for="M1L4Box" id="M1L4Label"> - Module 1 Lesson 4 <span id="M1L4BoxFeedback"></span></label><br>

<input type="checkbox" id="M1L5Box" class="checkbox1" value="M1L5">
<label for="M1L5Box" id="M1L5Label"> - Module 1 Lesson 5 <span id="M1L5BoxFeedback"></span></label><br>

<input type="checkbox" id="M1L6Box" class="checkbox1" value="M1L6">
<label for="M1L6Box" id="M1L6Label"> - Module 1 Lesson 6 <span id="M1L6BoxFeedback"></span></label><br>

<input type="checkbox" id="M1L7Box" class="checkbox1" value="M1L7">
<label for="M1L7Box" id="M1L7Label"> - Module 1 Lesson 7 <span id="M1L7BoxFeedback"></span></label><br>

<input type="checkbox" id="M1L8Box" class="checkbox1" value="M1L8">
<label for="M1L8Box" id="M1L8Label"> - Module 1 Lesson 8 <span id="M1L8BoxFeedback"></span></label><br>

Not sure why this isn't working, but am sure you js whizzes are slapping your forehead at how easy this is. I have tried multiple solutions found here and elsewhere, but never am able to successfully adapt examples to my code. Thank you so much for your help!!!

Why don't you just use a common class and use string concatenation to get the second element.

$(".item").on("change", function() {
  $("#" + this.id + "Feedback").text(this.checked ? "- completed" : "- mark as complete");
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="M1L1Box" class="item" />
<label id="M1L1BoxFeedback"></label>
<br/>
<input type="checkbox" id="M2L2Box" class="item" />
<label id="M2L2BoxFeedback"></label>
<br/>
<input type="checkbox" id="M3L3Box" class="item" />
<label id="M3L3BoxFeedback"></label>
<br/>

And depending on your HTML structure, you really do not even need JavaScript to change the text of an element linked to the checkbox.

.item + label span { display: none }
.item + label span + span { display: inline; }
.item:checked + label span { display: inline; }
.item:checked + label span + span { display: none; }

<input type="checkbox" id="M1L1Box" class="item" />
<label id="M1L1BoxFeedback"> - <span>completed</span><span>mark as complete</span></label>
<br/>
<input type="checkbox" id="M2L2Box" class="item" />
<label id="M2L2BoxFeedback"> - <span>completed</span><span>mark as complete</span></label>
<br/>
<input type="checkbox" id="M3L3Box" class="item" />
<label id="M3L3BoxFeedback"> - <span>completed</span><span>mark as complete</span></label>
<br/>

</div>

You could add a CSS class to the element, and use the class selector instead of the id selector. Then you don't even need the loop.

I am no jQuery whizz, but I thought you would need to use $(this).checked rather than this.checked

Why you don't use a CSS class for the elements instead the ID? You could do something like:

$(".feedbackBox").click(function() {
  $(this).text(this.checked ? "- completed" : "- mark as complete");
});

You can read about it here: http://www.learningjquery.com/2007/08/what-is-this