javascript - How do I make a To-Do List, and at 0 elements unchecked remaining to show a button -
i have to-do list made in html, css , javascript, , want show button if 0 elements unchecked remaining. think code should contain variable named "numremaining". have tried in jquery, total failure.
this have tried:
$(".todo-checkbox").change(function(){ if($(".todo-checkbox:checked").length > 4){ $("#yourbutton").show(); } }); this code:
<html> <head> <link rel="stylesheet" href="tomo.css"> <title>tomo</title> </head> <body> <h1>tomo</h1> <center> <div id="todo-app"> <label class="todo-label" for="new-todo">what have today?</label> <input type="text" id="new-todo" class="todo-input" placeholder="english homework"> <ul id="todo-list" class="count-this"></ul> <div id="todo-stats"></div> </div> <button onclick="myprint()">print</button> </center> <script type="text/x-template" id="todo-item-template"> <div class="todo-view"> <input type="checkbox" class="todo-checkbox" {checked}> <span class="todo-content" tabindex="0">{text}</span> </div> <div class="todo-edit"> <input type="text" class="todo-input" value="{text}"> </div> <a href="#" class="todo-remove" title="remove task"> <span class="todo-remove-icon"></span> </a> </script> <script type="text/x-template" id="todo-stats-template"> <span class="todo-count"> <span class="todo-remaining">{numremaining}</span> <span class="todo-remaining-label">{remaininglabel}</span> left. </span> <a href="#" class="todo-clear"> clear <span class="todo-done">{numdone}</span> completed <span class="todo-done-label">{donelabel}</span> </a> </script> <script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script> <script> yui().use('event-focus', 'json', 'model', 'model-list', 'view', function (y) { var todoappview, todolist, todomodel, todoview; todomodel = y.todomodel = y.base.create('todomodel', y.model, [], { sync: localstoragesync('todo'), toggledone: function () { this.set('done', !this.get('done')).save(); } }, { attrs: { done: {value: false}, text: {value: ''} } }); todolist = y.todolist = y.base.create('todolist', y.modellist, [], { model: todomodel, sync: localstoragesync('todo'), done: function () { return this.filter(function (model) { return model.get('done'); }); }, remaining: function () { return this.filter(function (model) { return !model.get('done'); }); } }); todoappview = y.todoappview = y.base.create('todoappview', y.view, [], { events: { '#new-todo': {keypress: 'createtodo'}, '.todo-clear': {click: 'cleardone'}, '.todo-item': { mouseover: 'hoveron', mouseout : 'hoveroff' } }, template: y.one('#todo-stats-template').gethtml(), initializer: function () { var list = this.todolist = new todolist(); list.after('add', this.add, this); list.after('reset', this.reset, this); list.after(['add', 'reset', 'remove', 'todomodel:donechange'], this.render, this); list.load(); }, render: function () { var todolist = this.todolist, stats = this.get('container').one('#todo-stats'), numremaining, numdone; if (todolist.isempty()) { stats.empty(); return this; } numdone = todolist.done().length; numremaining = todolist.remaining().length; stats.sethtml(y.lang.sub(this.template, { numdone : numdone, numremaining : numremaining, donelabel : numdone === 1 ? 'task' : 'tasks', remaininglabel: numremaining === 1 ? 'task' : 'tasks' })); if (!numdone) { stats.one('.todo-clear').remove(); } return this; }, add: function (e) { var view = new todoview({model: e.model}); this.get('container').one('#todo-list').append( view.render().get('container') ); }, cleardone: function (e) { var done = this.todolist.done(); e.preventdefault(); this.todolist.remove(done, {silent: true}); y.array.each(done, function (todo) { todo.destroy({remove: true}); }); this.render(); }, createtodo: function (e) { var inputnode, value; if (e.keycode === 13) { // enter key inputnode = this.get('inputnode'); value = y.lang.trim(inputnode.get('value')); if (!value) { return; } this.todolist.create({text: value}); inputnode.set('value', ''); } }, hoveroff: function (e) { e.currenttarget.removeclass('todo-hover'); }, hoveron: function (e) { e.currenttarget.addclass('todo-hover'); }, reset: function (e) { var fragment = y.one(y.config.doc.createdocumentfragment()); y.array.each(e.models, function (model) { var view = new todoview({model: model}); fragment.append(view.render().get('container')); }); this.get('container').one('#todo-list').sethtml(fragment); } }, { attrs: { container: { valuefn: function () { return '#todo-app'; } }, inputnode: { valuefn: function () { return y.one('#new-todo'); } } } }); todoview = y.todoview = y.base.create('todoview', y.view, [], { containertemplate: '<li class="todo-item"/>', events: { '.todo-checkbox': {click: 'toggledone'}, '.todo-content': { click: 'edit', focus: 'edit' }, '.todo-input' : { blur : 'save', keypress: 'enter' }, '.todo-remove': {click: 'remove'} }, template: y.one('#todo-item-template').gethtml(), initializer: function () { var model = this.get('model'); model.after('change', this.render, this); model.after('destroy', function () { this.destroy({remove: true}); }, this); }, render: function () { var container = this.get('container'), model = this.get('model'), done = model.get('done'); container.sethtml(y.lang.sub(this.template, { checked: done ? 'checked' : '', text : model.getashtml('text') })); container[done ? 'addclass' : 'removeclass']('todo-done'); this.set('inputnode', container.one('.todo-input')); return this; }, edit: function () { this.get('container').addclass('editing'); this.get('inputnode').focus(); }, enter: function (e) { if (e.keycode === 13) { y.one('#new-todo').focus(); } }, remove: function (e) { e.preventdefault(); this.constructor.superclass.remove.call(this); this.get('model').destroy({'delete': true}); }, save: function () { this.get('container').removeclass('editing'); this.get('model').set('text', this.get('inputnode').get('value')).save(); }, toggledone: function () { this.get('model').toggledone(); } }); function localstoragesync(key) { var localstorage; if (!key) { y.error('no storage key specified.'); } if (y.config.win.localstorage) { localstorage = y.config.win.localstorage; } var data = y.json.parse((localstorage && localstorage.getitem(key)) || '{}'); function destroy(id) { var modelhash; if ((modelhash = data[id])) { delete data[id]; save(); } return modelhash; } function generateid() { var id = '', = 4; while (i--) { id += (((1 + math.random()) * 0x10000) | 0) .tostring(16).substring(1); } return id; } function get(id) { return id ? data[id] : y.object.values(data); } function save() { localstorage && localstorage.setitem(key, y.json.stringify(data)); } function set(model) { var hash = model.tojson(), idattribute = model.idattribute; if (!y.lang.isvalue(hash[idattribute])) { hash[idattribute] = generateid(); } data[hash[idattribute]] = hash; save(); return hash; } return function (action, options, callback) { var ismodel = y.model && instanceof y.model; switch (action) { case 'create': // intentional fallthru case 'update': callback(null, set(this)); return; case 'read': callback(null, get(ismodel && this.get('id'))); return; case 'delete': callback(null, destroy(ismodel && this.get('id'))); return; } }; } new todoappview(); }); </script> <script> function myprint() { window.print(); } </script> </body> </html>
you can compare number of checked boxes total number of boxes, this:
var $boxes = $(".todo-checkbox"); $boxes.change(function() { if ($boxes.filter(':checked').length == $boxes.length) { $("#yourbutton").show(); } });
Comments
Post a Comment