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