如何通過cheboxlist移動​​選中標記？

Question

所以我要的CheckBoxList

<input type="checkbox" name="colorc" value="black" />Black<br/><br> 
<input type="checkbox" name="colorc" value="brown" />Brown<br/><br> 
<input type="checkbox" name="colorc" value="white" />White<br/><br> 
<input type="button" id="btnClick" value="Color Change"></button> 

，當我按下按鈕，勾選轉移到接下來的複選框，相同的，如果我們有兩個複選標記，我想，但沒有使用JQuery，明確JS。感謝

Answer 1

我想這會做：

document.getElementById("btnClick").onclick = function(){  
    var checkBoxes = document.getElementsByName("colorc"); 
    var checked = checkBoxes[checkBoxes.length - 1].checked; 

    for(var i = checkBoxes.length-1; i > 0; --i){   
     checkBoxes[i].checked = checkBoxes[i-1].checked; 
    } 

    checkBoxes[0].checked = checked; 
} 

演示：http://jsfiddle.net/t231c0ga/1/

Answer 2

當前檢查輸入可以被選擇爲：

input[name=colorc]:checked 

下一輸入可用general sibling selector（〜）被得到：

input[name=colorc]:checked ~ input[name=colorc] 

從複選框更改輸入單選按鈕，並使用此代碼。如果沒有下一個輸入，則默認爲第一個輸入：

document.getElementById('btnClick') 
 
    .addEventListener('click',function() { 
 
    var next= 
 
      document.querySelector(
 
      'input[name=colorc]:checked ~ input[name=colorc]' 
 
     ) || 
 
      document.querySelector('input[name=colorc]'); 
 
    
 
    next.checked= true; 
 
    });

<input type="radio" name="colorc" value="black" checked/>Black<br/><br> 
 
<input type="radio" name="colorc" value="brown" />Brown<br/><br> 
 
<input type="radio" name="colorc" value="white" />White<br/><br> 
 
<input type="button" id="btnClick" value="Color Change"></button>