Question

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

HTML：

<td><script> checkbox('px_THPressure_Enable')</script></td>
<td><script> checkbox('px_THPressure_Activate')</script></td>

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);
}

现在我正在尝试使用CSS设置复选框的样式，如此处所述http://www.paulund.co.uk/style-checkboxes-with-css“Checkbox Four”

所以现在我的复选框功能改为：

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);
}

CSS：

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;
}

现在我能够看到新样式的复选框的正确状态，但是当我单击复选框时，值不会改变。我知道问题出在id字段中。复选框样式需要id =“checkboxFourInput”，我的程序要求id等于正在切换的寄存器值。即THPressure_Enable

我知道在html元素上有多个id是不允许的，所以有什么方法可以用样式化的复选框切换这个寄存器值。

提前谢谢你。

编辑：

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

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!");
}

CSS复选框样式以切换值

0 个答案: