0

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

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

0 回答 0