如何通过 cheboxlist 移动复选标记？

Question

所以我有复选框列表

<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

当前选中的输入可以选择为：

input[name=colorc]:checked

下一个输入可以使用 general sibling selector (~):

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

将您的输入从复选框更改为单选按钮，并使用此代码。如果没有 next 输入，则默认为第一个输入：

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>

Answer 2

我想这样可以：

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/

如何通过 cheboxlist 移动复选标记？

How to move checkmark through the cheboxlist?

javascript

checkbox