Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Looping over checkboxes in reverse</title>
</head>
<body>
  <output></output>
  <button>store result</button>
  <button>re-store</button>
  <div></div>
</body>
</html>
 
var state = '';
function store(){
  state = '';
  var inputs = document.querySelectorAll('input');
  var all = inputs.length;
  while (all--) {
    state += inputs[all].checked ? '1' : '0';
  }
  state = parseInt(state,2);
  output.innerHTML = state;
  buttons[1].disabled = false;
}
function restore(){
  var states = state.toString(2).split('').reverse();
  var inputs = document.querySelectorAll('input');
  var all = inputs.length;
  while (all--) {
    inputs[all].checked = +states[all];
  }
}
var output = document.querySelector('output');
var div = document.querySelector('div');
var out = '';
for(var i=0;i<20;i++) {
  /* out += '<label><input type="checkbox" name="option'+i+'">Option '+i+'</label>';*/
  out += '<input type="checkbox"';
  out += Math.random() > 0.6 ? ' checked' : '';
  out += '>';
}
div.innerHTML = out;
var buttons = document.querySelectorAll('button');
buttons[0].addEventListener('click', function(ev){
  ev.preventDefault();
  store();
});
buttons[1].disabled = true;
buttons[1].addEventListener('click', function(ev){
  ev.preventDefault();
  restore();
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x