I'm working on a web application that allows users to create to-do items. My goal is to have the text field be crossed out when the checkbox is checked.
When the "add todo" button is clicked, a new item is generated in JavaScript. Then, if the checkbox (referred to as button) is checked, the text should appear crossed out. How can I make this happen?
Thank you in advance!
This is the section of my HTML code where the to-dos are displayed.
<div class="items">
<h3>Items</h3>
<div id="itemList">
</div>
<button id="addItem" >Add Item</button>
</div>
This is the constructor function for a new item:
function item(content, list) {
/* Global attributes */
this.content = content;
this.checked = false;
this.id = 0;
this.settings = new Settings();
this.element = $("<div>");
/* Local attributes */
var button = $("<input type='checkbox' Class='inputCheck'>");
button.appendTo(this.element);
var text = $("<input type='text'>");
text.appendTo(this.element); text.val(content);
var edit = $('<button>Edit</button>');
edit.appendTo(this.element);
var deleteButton = $('<input type=\'image\' src=\'Images/trash.png\' height=\'20\' width=\'20\'>');
deleteButton.appendTo(this.element);
var thisObject = this;
/* Appending item */
list.addItem(this);
text.attr("disabled", true);
}
(edit)
Whenever the "add todo" button is clicked, it triggers this function:
$("#addItem").click(function(event){
var newItem = new item("Default message", listSelected);
});
And when this method is called, the current object's (referred to as thisObject) checkbox status is toggled. The text should also be crossed out at this point.
button.click(function() {
thisObject.checked = button.is(":checked");
//thisObject.text => strike
});