Here the test case.

On the first checkbox if You change from checked to unchecked You’ll se an alert “C1 0” (correct) but if You goes from unchecked to checked You’ll get “C1 -1″ (wrong, it should be the same as before).


<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<title>Checkbox Overview Demo</title>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />
<link rel=”stylesheet” type=”text/css” href=”../../../source/styles/smart.default.css” />
<link rel=”stylesheet” type=”text/css” href=”../../styles/demos.css” />
<link rel=”stylesheet” type=”text/css” href=”styles.css” />

<body class=”viewport”>
function applica(element) {
var myPage = document.forms[0];
var id = -1;
var elementName = element.name;
for (var i = 0; i < myPage.length; i++) {
if (myPage.elements[i].name == elementName) {
id = i;
alert(elementName + ” ” +id);
<section id=”check-box”>
<p>Checkboxes allow the user to select multiple options from a set.</p><br/>
<p>If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.</p><br/>
<p>If you have a single option, avoid using a checkbox and use an on/off switch instead.</p><br/>
<div class=”check-box-container-light”>
<smart-check-box checked onChange=”applica(this)” name=”C1″></smart-check-box>
<smart-check-box name=”C2″></smart-check-box>
<!– scripts –>
<script src=”../../../source/modules/smart.checkbox.js”></script>
<script src=”index.js”></script>