どのチェックボックスにチェックが入っているかに基づいてvar iを定義するにはどうすればよいですか？

私はあなたが完了したタスクをチェックすることができ、完了したパーセンテージを計算するリストを作成しようとしています。だから私が試みた最初のことは、いくつかのチェックボックスを作ってクリックのイベントリスナーを追加することでした。おそらく= trueかそのようなものかどうかを確認するために値をチェックします。どのチェックボックスにチェックが入っているかに基づいてvar iを定義するにはどうすればよいですか？

最初のチェックボックスをクリックするとvar iを定義する方法を見つけようとしています。0に設定し、2番目を1に設定します。しかし、ユーザにはvar iを動的に設定します新しいチェックボックスを追加する予定で、新しいアイテムを追加した後にはiと等しいと宣言できません。とにかくこれは私がこれまで持っていたものです。

<!DOCTYPE html> 
<html> 
<head> 
    <title>To Do List</title> 
    <script type="text/javascript"> 
    var list; 
    var checkboxes; 
    document.addEventListener("DOMContentLoaded",load); 
    function load(){ 
     list = get("list"); 
     checkboxes = getTag("input"); 
     checkboxes[i].addEventListener("click",toggle); 
    } 
    function toggle(){ 
     alert(this.value); 
    } 
    function get(id){ 
     return document.getElementById(id); 
    } 
    function getTag(tag){ 
     return document.getElementsByTagName(tag); 
    } 
    </script> 
</head> 
<body> 
    <h1>Kung Fu To Do List 1.0</h1> 
    <ul id="list"> 
     <li><input type="checkbox" value="true"></li> 
     <li><input type="checkbox" value="false"></li> 
    </ul> 
</body> 
</html>

出典

2012-02-08 zachdyer

編集のためにコリンに感謝します。 – zachdyer

jQueryオプション？ – j08691

正直なところ、私はあなたがiを定義することによって何を意味するか分かりません。しかし、それはあなたが探しているものは、完成したパーセンテージを計算し、ユーザーが新しいアイテムを追加したときに/を更新しておくように思えます。私はcheckboxesを追跡しませんが、計算する必要があるときにそれらのループを繰り返します。さらに、新しいチェックボックスを追加するメソッドを使用すると、監視するイベントをフックできます。次のようなものがあります：（jsfiddle：http://jsfiddle.net/nuuyx/）

<!DOCTYPE html> 
<html> 
<head> 
    <title>To Do List</title> 
    <script> 
     var list; 
     document.addEventListener("DOMContentLoaded",load); 
     function load(){ 
      list = get("list"); 
      checkboxes = getTag("input"); 
      for(var i = 0, l = checkboxes.length; i < l; i++){ 
       checkboxes[i].addEventListener("click", toggle); 
      } 
      updatePercentage(); 
     } 
     function updatePercentage(){ 
      var checkboxes = getTag("input"); 
      var total = checkboxes.length; 
      var done = 0; 
      for(var i = 0, l = checkboxes.length; i < l; i++){ 
       if(checkboxes[i].checked){ 
        done++;  
       } 
      } 
      get('percent').innerHTML = 'Done: '+Math.round((done/total)*100)+'%'; 
     } 
     function newCheckbox(){ 
      var item = document.createElement('li'); 
      var chk = document.createElement('input'); 
      chk.type = 'checkbox'; 
      chk.addEventListener("click", toggle); 
      item.appendChild(chk); 
      list.appendChild(item); 
      updatePercentage(); 
     } 
     function toggle(){ 
      //alert(this.value); 
      updatePercentage(); 
     } 
     function get(id){ 
      return document.getElementById(id); 
     } 
     function getTag(tag){ 
      return document.getElementsByTagName(tag); 
     } 
    </script> 
</head> 
<body> 
    <h1>Kung Fu To Do List 1.0</h1> 
    <ul id="list"> 
     <li><input type="checkbox" value="true"></li> 
     <li><input type="checkbox" value="false"></li> 
    </ul> 
    <div id="percent"></div> 
    <button onclick="newCheckbox()">new item</button> 
</body> 
</html>

出典

2012-02-08 16:30:27 rgthree

あなたは私の心を吹き飛ばした。 – zachdyer

<input type="hidden" value="-1" />を作成することが、少なくともあなたが望むものを達成するための最も簡単な方法です。その値はonClickイベントで変更されます。チェックボックス（0,1,2、...）に名前を付け、この変数をイベントで読み込んで、非表示の入力フィールドに保存することができます。

出典

2012-02-08 16:16:37 maialithar

どのチェックボックスにチェックが入っているかに基づいてvar iを定義するにはどうすればよいですか？

答えて

関連する問題