Javascript equivalent to PHP for loop efficiency

Question

The first message, so I apologize if I miss something obvious here.

What I'm trying to do is pretty simple .... in php. I can do it in a dream. However, my page requires javascript integration, which I am not yet very qualified.

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

Question: I have a number of flags that the user will “check” if they have done something. Javascript works fine, but I need to use a loop so that my brain does not suffer from all unnecessary lines of code.

Here is 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 is ONE version of what I tried to spend time in my hours to make it effective:

  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 doesn't work, but I'm sure you js whizzes hit my forehead how easy it is. I tried several solutions found here and elsewhere, but I was never able to successfully adapt the examples to my code. Thank you so much for your help!

Answer 1

Why don't you just use the generic 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 don't need JavaScript to change the text of the element associated with this 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/> 

Answer 2

Why don't you use the CSS class for elements instead of ID? You can 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

Answer 3

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

I'm not a jQuery whoosh, but I thought you need to use $(this).checked , not this.checked