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