1. 首頁
  2. 問答
  3. 創建複選框來更改輸出文字顏色

創建複選框來更改輸出文字顏色

2017-02-10 19 views
2

有沒有辦法讓紅色&綠色的複選框創建，使輸出文本的顏色？現在我有兩個輸入框，一個紅色和一個綠色，我可以添加一個複選框來代替輸出的顏色。創建複選框來更改輸出文字顏色

這是我目前有。

<!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

回答

0

試試下面的代碼。並將您的標籤類更改爲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

+0

可能有一些if else語句{missing please correct – ThaTal

+0

似乎沒有工作。我發現它缺少一個{但我不確定它應該去哪裏。對不起，我對這種腳本不太瞭解。 – MackMan

+0

我已經測試過。請訪問此鏈接https://jsfiddle.net/cwyr2490/ – ThaTal

1

複選框有時候很棘手。您必須檢查頁面加載時是否存在該值。 （'＃colorChange'）。prop（'checked'，true）; $（'＃colorChange'）。

來源

2017-02-10 19:26:13 slopfunkdust

相關問題

 相關問題