Javascript 用于切换值的CSS复选框样式

我目前正在编写一个程序，根据复选框的状态切换值。使用普通复选框，一切正常

HTML:

现在，我可以看到新样式复选框的正确状态，但当我单击复选框时，值不会更改。我知道问题在id字段中。复选框样式需要id=“checkboxFourInput”，而我的程序需要id等于正在切换的寄存器值。ie THU压力_启用

我知道在一个html元素上不允许有多个ID，所以是否有任何方法可以使用styled复选框切换这个寄存器值

先谢谢你

编辑：

这是一个根据正确授权更改寄存器值的函数。我的功能定义如下：

function setDataJQuery(register,value)
{
statusElem = document.getElementById('status');
if (statusElem)
statusElem.innerHTML=" ";

//alert("logged in as " + "<?php echo \"{$_SERVER['PHP_AUTH_USER']}\"; ?>");
if (((user_name == 'slipsmart' || user_name== 'slipsmart_super') && (operator_set_ok.indexOf(register.substring(3)) != -1)) || 
(user_name == 'slipsmart_super' && (supervisor_set_ok.indexOf(register.substring(3)) != -1)) ||
user_name == 'slipsmart_setup')
{
$.ajax({
url: 'set.php?' + register + '=' + value,
type: 'post',
success:function(data){
  var val_pairs = data.split("&");
  document.getElementById('Error').innerHTML=" ";
  for (i in val_pairs)
  {
    var pair = val_pairs[i].split("=");
var myElem = document.getElementById(pair[0]);

if (myElem)
    myElem.innerHTML= pair[1];
  }
  }

  }); 
}
else
alert("Not authorized!");
}

函数setDataJQuery（寄存器，值）
{
statusElem=document.getElementById（'status'）；
如果（状态元素）
statusElem.innerHTML=“”；
//警报（“以“+”登录）；
如果（（user_name='slipsmart'| | user_name='slipsmart_super'）&&（operator_set_ok.indexOf（register.substring（3））！=-1））|
（用户名=='slipsmart\u super'&（主管设置\u ok.indexOf（寄存器子字符串（3））！=-1））||
user\u name=='slipsmart\u setup'）
{
$.ajax({
url:'set.php？'+register+'='+value，
键入：“post”，
成功：功能（数据）{
var val_pairs=数据分割（“&”）；
document.getElementById（'Error'）.innerHTML=“”；
用于（以val_成对表示的i）
{
var pair=val_pairs[i]。拆分（“=”）；
var myElem=document.getElementById（对[0]）；
如果（迈勒姆）
myElem.innerHTML=pair[1]；
}
}
}); 
}
其他的
警报（“未授权！”）；
}

此setDataJQuery的目的是什么？你定义了它吗？现在我知道它与onClick有关，因为用于按钮反向更改的css似乎没有改变。当按下按钮以某种方式调用css类时，我是否应该修改javascript

function checkbox(register)
{
var onClicked = "setDataJQuery('"+register+"',this.checked?'1':'0')";
var output = "<input type='checkbox' class='fetch' onClick=\""+onClicked+"\" id='" + register + "'>";
document.write(output);
}

function checkbox(register)
{
var onClicked = "setDataJQuery('"+register+"',this.checked?'1':'0')";
var output = "<div class='checkboxFour'><input type='checkbox' class='fetch' value='1' onClick=\""+onClicked+"\" id='" + register + "' name=''></input><label for='checkboxFourInput'></label></div>";

document.write(output);
}

input[type=checkbox] {
visibility: hidden;
}
/**
* Checkbox Four
*/
.checkboxFour {
width: 40px;
height: 40px;
background: #ddd;
margin: 20px 90px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
/**
* Create the checkbox button
*/
.checkboxFour label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background: #333;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
/**
* Create the checked state
*/
.checkboxFour input[type=checkbox]:checked + label {
background: #26ca28;
}

function setDataJQuery(register,value)
{
statusElem = document.getElementById('status');
if (statusElem)
statusElem.innerHTML=" ";

//alert("logged in as " + "<?php echo \"{$_SERVER['PHP_AUTH_USER']}\"; ?>");
if (((user_name == 'slipsmart' || user_name== 'slipsmart_super') && (operator_set_ok.indexOf(register.substring(3)) != -1)) || 
(user_name == 'slipsmart_super' && (supervisor_set_ok.indexOf(register.substring(3)) != -1)) ||
user_name == 'slipsmart_setup')
{
$.ajax({
url: 'set.php?' + register + '=' + value,
type: 'post',
success:function(data){
  var val_pairs = data.split("&");
  document.getElementById('Error').innerHTML=" ";
  for (i in val_pairs)
  {
    var pair = val_pairs[i].split("=");
var myElem = document.getElementById(pair[0]);

if (myElem)
    myElem.innerHTML= pair[1];
  }
  }

  }); 
}
else
alert("Not authorized!");
}