チェックボックスを作成して出力テキストの色を変更する

赤色のチェックボックスを緑色に作成する方法はありますか？出力テキストの色が緑色になるように緑色で表示しますか？&今私は2つの入力ボックスを持っています.1つは赤と1つの緑で、代わりに色が出力されるはずのチェックボックスを追加できます。チェックボックスを作成して出力テキストの色を変更する

ここに私の現在のものがあります。

<!doctype html> 
    <head> 
    <title>Hospital Info</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <link rel="stylesheet" type="text/css" href="ds.css" /> 
    </head> 

    <body> 

<br /> 
<br /> 
    <center><h1>Hospital Info</h1></center> 



<div id="page-wrap"> 
    <form method="post" action="ds.php"> 


       <label for="CLABSI_GREEN"><font color="green">CLABSI</font>       <br></label> 
       <textarea class="main" name="CLABSI_GREEN"></textarea> 

       <label for="CLABSI_RED"><font color="red">CLABSI</font><br></label> 
       <textarea class="main" name="CLABSI_RED"></textarea><BR><BR> <BR> 



       <label for="FWI_GREEN"><font color="green">Fall With Injury:</font><br></label> 
       <textarea class="main" name="FWI_GREEN"></textarea> 

       <label for="FWI_RED"><font color="red">Fall With Injury:</font><br></label> 
       <textarea class="main" name="FWI_RED"></textarea><BR><BR><BR> 



       <label for="HAUTI_GREEN"><font color="green">HAUTI:</font><br></label> 
       <textarea class="main" name="HAUTI_GREEN"></textarea> 

       <label for="HAUTI_RED"><font color="red">HAUTI:</font><br> </label> 
       <textarea class="main" name="HAUTI_RED"></textarea><BR><BR><BR> 




       <label for="HAP_GREEN"><font color="green">HAP:</font><br></label> 
       <textarea class="main" name="HAP_GREEN"></textarea> 

       <label for="HAP_RED"><font color="red">HAP:</font><br></label> 
       <textarea class="main" name="HAP_RED"></textarea><BR><BR><BR> 




       <label for="POI_GREEN"><font color="green">Post-Op Infection:</font><br></label> 
       <textarea class="main" name="POI_GREEN"></textarea> 

       <label for="SSI_RED"><font color="red">Post-Op Infection:</font><br></label> 
       <textarea class="main" name="POI_RED"></textarea><BR><BR><BR> 




       <label for="CDIFF_GREEN"><font color="green">C-DIFF:</font><br></label> 
       <textarea class="main" name="CDIFF_GREEN"></textarea> 

       <label for="CDIFF_RED"><font color="red">C-DIFF:</font><br></label> 
       <textarea class="main" name="CDIFF_RED"></textarea><BR><BR><BR> 



       <label for="WOUND_GREEN"><font color="green">Wound Dehiscence:</font><br></label> 
       <textarea class="main" name="WOUND_GREEN"></textarea> 

       <label for="WD_RED"><font color="red">Wound Dehiscence:</font><br></label> 
       <textarea class="main" name="WOUND_RED"></textarea><BR><BR><BR> 



       <label for="PI_GREEN"><font color="green">PI:</font><br></label> 
       <textarea class="main" name="PI_GREEN"></textarea> 

       <label for="PI_RED"><font color="red">PI:</font><br></label> 
       <textarea class="main" name="PI_RED"></textarea><BR><BR><BR> 



       <label for="APAL_GREEN"><font color="green">Accidental Punctures/Lacs:</font><br></label> 
       <textarea class="main" name="APAL_GREEN"></textarea> 

       <label for="APAL_RED"><font color="red">Accidental Punctures/Lacs:</font><br></label> 
       <textarea class="main" name="APAL_RED"></textarea><BR><BR><BR> 



       <label for="MRSA_GREEN"><font color="green">MRSA:</font><br></label> 
       <textarea class="main" name="MRSA_GREEN"></textarea> 

       <label for="MRSA_RED"><font color="red">MRSA:</font><br></label> 
       <textarea class="main" name="MRSA_RED"></textarea><BR><BR><BR> 



       <label for="IP_GREEN"><font color="green">Iatrogenic Pneumothorax:</font><br></label> 
       <textarea class="main" name="IP_GREEN"></textarea> 

       <label for="IP_RED"><font color="red">Iatrogenic Pneumothorax:</font><br></label> 
       <textarea class="main" name="IP_RED"></textarea><BR><BR><BR> 



       <label for="S_GREEN"><font color="green">Sepsis:</font><br></label> 
       <textarea class="main" name="S_GREEN"></textarea> 

       <label for="S_RED"><font color="red">Sepsis:</font><br></label> 
       <textarea class="main" name="S_RED"></textarea><BR><BR><BR> 



       <label for="VTE_GREEN"><font color="green">VTE:</font><br></label> 
       <textarea class="main" name="VTE_GREEN"></textarea> 

       <label for="VTE_RED"><font color="red">VTE:</font><br></label> 
       <textarea class="main" name="VTE_RED"></textarea><BR><BR><BR> 





<div id="contact-area"> 

        <input type="submit" name="submit" value="Submit"  class="submit-button" /> 

     </form> 
</div> 
</div> 
    <div style="clear: both;"></div> 
</div> 


</body> 
</html>

マイds.phpファイル：

<?php 
$CLABSI_GREEN = $_POST['CLABSI_GREEN']; 
$FWI_GREEN = $_POST['FWI_GREEN']; 
$HAUTI_GREEN = $_POST['HAUTI_GREEN']; 
$HAP_GREEN = $_POST['HAP_GREEN']; 
$POI_GREEN = $_POST['POI_GREEN']; 
$CDIFF_GREEN = $_POST['CDIFF_GREEN']; 
$PI_GREEN = $_POST['PI_GREEN']; 
$APAL_GREEN = $_POST['APAL_GREEN']; 
$MRSA_GREEN = $_POST['MRSA_GREEN']; 
$IP_GREEN = $_POST['IP_GREEN']; 
$S_GREEN = $_POST['s_GREEN']; 
$VTE_GREEN = $_POST['VTE_GREEN']; 
$WOUND_GREEN = $_POST['WOUND_GREEN']; 
$CLABSI_RED = $_POST['CLABSI_RED']; 
$FWI_RED = $_POST['FWI_RED']; 
$HAUTI_RED = $_POST['HAUTI_RED']; 
$HAP_RED = $_POST['HAP_RED']; 
$POI_RED = $_POST['POI_RED']; 
$CDIFF_RED = $_POST['CDIFF_RED']; 
$PI_RED = $_POST['PI_RED']; 
$APAL_RED = $_POST['APAL_RED']; 
$MRSA_RED = $_POST['MRSA_RED']; 
$IP_RED = $_POST['IP_RED']; 
$S_RED = $_POST['S_RED']; 
$VTE_RED = $_POST['VTE_RED']; 
$WOUND_RED = $_POST['WOUND_RED']; 


ob_start(); 
?> 

<META http-equiv='Content-Type' content='text/html; charset=UTF-8'> 


<html> 
<head> 
<title>GCH Information Portal</title> 
<style> 
.style h1 { 
    font-family: Arial; 
    text-transform: uppercase; 
    width: 450px; 
    border-style:double; 
    font-size:22px; 

} 

.style main { 
    font-size:20px; 
} 

.style h2 { 
    position:relative; 
    font-size: 30px; 
    font-family: Arial; 
    color: black; 
    text-transform: uppercase; 
    width: 450px; 
} 

.style h3 { 
    font-family: Calibri; 
    text-transform: uppercase; 
    font-size: 20px; 
} 

.img { 
    height: 160px; 
    width: 400px; 
} 


</style> 
<script language="javascript" type="text/javascript"> 
function windowClose() { 
window.open('','_parent',''); 
window.close(); 
} 
</script> 
</head> 

<body bgcolor="white"> 

<div class="style"> 

     <center> 

     <input type="image" src="gch.jpg" id="img" onclick="windowClose();"> 

     <h2>Hospital Acquired Conditions</h2> 
     <h1><u>Days Since:</u></h1> 
     <main> 


     <h3>CLABSI: 

      <font color="green"><?php echo nl2br ($CLABSI_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($CLABSI_RED);?></font> 
     </h3> 


     <h3>Fall with Injury: 
      <font color="green"><?php echo nl2br ($FWI_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($FWI_RED);?></font> 
     </h3> 

     <h3>Hospital Acquired UTI: 
      <font color="green"><?php echo nl2br ($HAUTI_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($HAUTI_RED);?></font> 
     </h3> 

     <h3>HAP: 
      <font color="green"><?php echo nl2br ($HAP_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($HAP_RED);?></font> 
     </h3> 

     <h3>Post-Op Infection: 
      <font color="green"><?php echo nl2br ($POI_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($POI_RED);?></font> 
     </h3> 

     <h3>C-DIFF: 
      <font color="green"><?php echo nl2br ($CDIFF_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($CDIFF_RED);?></font> 
     </h3> 

     <h3>Wound Dehiscence: 
      <font color="green"><?php echo nl2br ($WOUND_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($WOUND_RED);?></font> 
     </h3> 

     <h3>PI: 
      <font color="green"><?php echo nl2br ($PI_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($PI_RED);?></font> 
     </h3> 

     <h3>Accidental Punctures and Lacs: 
      <font color="green"><?php echo nl2br ($APAL_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($APAL_RED);?></font> 
     </h3> 

     <h3>MRSA: 
      <font color="green"><?php echo nl2br ($MRSA_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($MRSA_RED);?></font> 
     </h3> 

     <h3>Iatrogenic Pneumothorax: 
      <font color="green"><?php echo nl2br ($IP_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($IP_RED);?></font> 
     </h3> 


     <h3>Sepsis: 
      <font color="green"><?php echo nl2br ($S_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($S_RED);?></font> 
     </h3> 


     <h3>VTE: 
      <font color="green"><?php echo nl2br ($VTE_GREEN);?></font> 
      <font color="red"><?php echo nl2br ($VTE_RED);?></font> 
     </h3> 

    </center> 
    </table> 
</div>  
</body> 
</html> 

<?php 
$html = ob_get_contents(); 
ob_end_clean(); 

$filename = "ds.html"; 

file_put_contents($filename, $html); 

echo file_get_contents("ds.html"); 
?>

出典

2017-02-10 MackMan

はコードの下に試してみてください。ラベルクラスをPI_GREENとREDに変更してください

<input type="checkbox" id="colorChange" vlaue="green"> 
<input type="checkbox" id="colorChange" vlaue="red"> 
<script> 
$('#colorChange').bind('change', function() { 
if ($(this).is(':checked')){ 
if($(this).val()=='green') 
    $(".PI_GREEN").css("color", "green"); 
if($(this).val()=='red') 
$(".RED").css("color", "green"); 
} 
    else 
    $(".PI_GREEN").css("color", "black"); 
    $(".RED").css("color", "black"); 
}); 
</script>

出典

2017-02-10 19:01:30 ThaTal

else文がある場合があります{不足してください。 – ThaTal

動作していないようです。私はそれが欠けているのを見る{しかし、どこに行かなければならないのか分かりません。申し訳ありませんが、このタイプのスクリプトについてはあまりよく分かりません。 – MackMan

私はテストしました。このリンクにアクセスしてくださいhttps://jsfiddle.net/cwyr2490/ – ThaTal

チェックボックスは時々トリッキーです。ページが読み込まれたときに値が存在するかどうかを確認する必要があります。

$（ '＃colorChange'）。prop（ 'checked'、true）;

出典

2017-02-10 19:26:13 slopfunkdust

チェックボックスを作成して出力テキストの色を変更する

答えて

関連する問題