JavaScript中的複選框

Question

我遇到了問題。我必須創建一個帶有五個複選框的表單。

1. 用戶必須正好選擇五個複選框中的三個。
2. 更改時複選框更新複選框處的標記
3. 當用戶按下第四個元素時，應在紅燈處點亮。

3.當您取消選擇任何物品標記時，它會消失（白色），其餘爲綠色。

這裏是我做了什麼：http://jsfiddle.net/epredator/98TfU/

和我的一些代碼，因爲我不能發佈的jsfiddle鏈接，而不在文字一些代碼）：

function checkGreen() { 
     if (this.checked && counter >= 3) { 
      console.log("if test in checkGreen()"); 
     } 
    } 

我第3點有問題，因爲我不知道如何在取消選中其中一個帶綠燈的複選框後將紅燈變爲綠燈。我花了很多時間。正如你所看到的，我不是Javascript的主人，並要求你的幫助，認真幫助我:) ...爲了最終我必須使用純JavaScript（沒有jQuery）。非常感謝你的幫助......

Answer 1

這是我該怎麼做的。它比以前的做法更清潔。 FIDDLE。保留一組選中的框，並用它來確定哪些應該是什麼顏色。

(function() { 
    var checked = []; 

    document.getElementById("Checkbox1").addEventListener("click",toggle); 
    document.getElementById("Checkbox2").addEventListener("click",toggle); 
    document.getElementById("Checkbox3").addEventListener("click",toggle); 
    document.getElementById("Checkbox4").addEventListener("click",toggle); 
    document.getElementById("Checkbox5").addEventListener("click",toggle); 

    function toggle() { 
    if (this.checked) { 
     checked.push(this); 
    } else { 
     var index = checked.indexOf(this); 
     var box = checked.splice(index,1)[0]; 
     box.nextElementSibling.className = "white"; 
    } 
    refresh(); 
    } 

    function refresh() { 
    for (var i = 0; i < checked.length; i++) { 
     if (i < 3) { 
      checked[i].nextElementSibling.className = "green"; 
     } else { 
      checked[i].nextElementSibling.className = "red"; 
     } 
    } 

    } 

}()); 

Answer 2

對於JavaScript，你可以使用下面的代碼

<script type="text/javascript"> 

     // method to bind handler 
     function bindEvent(element, type, handler) { 
      if (element.addEventListener) { 
       element.addEventListener(type, handler, false); 
      } else { 
       element.attachEvent('on' + type, handler); 
      } 
     } 

     // binding click event to all the checkboxes with name 'choice' 
     // you can generalize this method 
     window.onload = function() { 
      var elements = document.getElementsByName('choice'); 
      if (!elements) 
       return; 

      for (var i = 0; i < elements.length; i++) { 
       var ele = elements[i]; 
       bindEvent(ele, 'click', function() { 
        changeColor(); 
       }); 
      } 
     } 

     // Pass the checkbox name to the function 
     // taken from stack overflow answer 
     //http://stackoverflow.com/questions/8563240/how-to-get-all-checked-checkboxes 
     function getCheckedBoxes(chkboxName) { 
      var checkboxes = document.getElementsByName(chkboxName); 
      var checkboxesChecked = []; 
      // loop over them all 
      for (var i = 0; i < checkboxes.length; i++) { 
       // And stick the checked ones onto an array... 
       if (checkboxes[i].checked) { 
        checkboxesChecked.push(checkboxes[i]); 
       } 
      } 
      // Return the array if it is non-empty, or null 
      return checkboxesChecked.length > 0 ? checkboxesChecked : null; 
     } 

     // with your other function, you can call this function or club the functionality 
     function changeColor() { 
      var elements = document.getElementsByName('choice'); 

      if (!elements) 
       return; 

      var selectedCheckBoxes = getCheckedBoxes('choice'); 
      if (selectedCheckBoxes && selectedCheckBoxes.length == 3) { 
       // set color to green 
      } 

     } 
    </script> 

和HTML使用（注意：只有 '名稱' 從輸入元素屬性）

<span> 
     <input type="checkbox" name="choice" id="Checkbox1" />1</span> 
    <span> 
     <input type="checkbox" name="choice" id="Checkbox2" />2</span> 
    <span> 
     <input type="checkbox" name="choice" id="Checkbox3" />3</span> 
    <span> 
     <input type="checkbox" name="choice" id="Checkbox4" />4</span> 
    <span> 
     <input type="checkbox" name="choice" id="Checkbox5" />5</span> 

您可以獲取所有選中的元素，如果計數爲3，則用有興趣的顏色標記每個身體。