accident_accrecord

In this example below you will see how to do a accident_accrecord with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JoyceWu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JoyceWu ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>accident_accrecord</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <meta charset="utf-8">
    <title>公共意外事件</title>
    <link rel="stylesheet" type="text/css"  href="accidentrecord.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  </head>
  <body  class="main">
    <h1>公共意外事件</h1>
    <div id="accident_hint">醫療器材設備因素造成的意外事件,如受影響對象為病人個人,請通報為醫療照護事件</div>
<!-- 類型(可複選)     -->
    <div class="big_width">
      <b>類型(可複選):</b>
        <div class="laboratory_btntype_nonext"> 
           <input type="checkbox" value="1" id="accident_type1">
           <label for="accident_type1" style="width:298px;font-size:16px;">火災(含明火、濃煙、火花或燃燒異味等)</label>
           <input type="checkbox" value="2" id="accident_type2">
           <label for="accident_type2">水災</label>
           <input type="checkbox" value="3" id="accident_type3">
           <label for="accident_type3">停電</label>
           <input type="checkbox" value="4" id="accident_type4">
           <label for="accident_type4">觸電</label>
           <input type="checkbox" value="5" id="accident_type5">
           <label for="accident_type5" style="width:298px;">電(扶)梯或電動門意外</label>
           <input type="checkbox" value="6" id="accident_type6">
           <label for="accident_type6">公共設施意外</label>
           <input type="checkbox" value="7" id="accident_type7">
           <label for="accident_type7">化學物質外洩</label>
           <input type="checkbox" value="8" id="accident_type8">
           <label for="accident_type8">輻射物質外洩</label>
           <input type="checkbox" value="9" id="accident_type9">
           <label for="accident_type9">消防警報異常</label>
           <input type="checkbox" value="10" id="accident_type10">
           <label for="accident_type10" style="width:298px;">水電空調、醫療氣體供應異常</label>
           <input type="checkbox" value="11" id="accident_type11">
           <label for="accident_type11">機構建築物損毀</label>
           <input type="checkbox" value="12" id="accident_type12">
           <label for="accident_type12">地震</label>
           <input type="checkbox" value="13" id="accident_type13">
           <label for="accident_type13">資訊系統當機</label>
           <input type="checkbox" value="14" class="otherchk" id="accident_type14">
           <label for="accident_type14" >其他 <input type="text" class="othertxt" style="max-width:82px;"></label>
        </div>
    </div>
      
<!-- 有無公共意外事件應變流程           -->
      <div class="small_width">
        <div>
         <b>有無公共意外事件應變流程:</b>
            <input type="radio"  name="accidentaccsop" value="" id="accident_acc_sop_yes" class="laboratory_title">
            <label for="accident_acc_sop_yes" class="laboratory_label">有</label>
              <div class="laboratory_hide">
                <input type="checkbox" value="1" id="accident_acc_sop_yes1">
                <label for="accident_acc_sop_yes1">制定書面文件</label>
                <input type="checkbox" value="2" id="accident_acc_sop_yes2">
                <label for="accident_acc_sop_yes2">實施相關教育訓練</label>
                <input type="checkbox" value="3" id="accident_acc_sop_yes3">
                <label for="accident_acc_sop_yes3">建立監測機制</label>
                <input type="checkbox" value="4" id="accident_acc_sop_yes4">
                <label for="accident_acc_sop_yes4">執行監測及評值</label>
                <input type="checkbox" value="5"  class="otherchk" id="accident_acc_sop_yes5">
                <label for="accident_acc_sop_yes5">其他 <input type="text" class="othertxt"></label>
              </div>
            <input type="radio" name="accidentaccsop" value="" class="laboratory_title" id="accident_acc_sop_no">
            <label for="accident_acc_sop_no" class="laboratory_label">無</label>
            <input type="radio" name="accidentaccsop" value="" class="laboratory_title" id="accident_acc_sop_unknown">
            <label for="accident_acc_sop_unknown" class="laboratory_label">不知道</label>
        </div>
        
<!-- 事件發生可能原因(可複選)         -->
        <b>事件發生可能原因(可複選):</b>
<!--       與工作狀態/流程因素相關 -->
        <div>
          <input type="checkbox" value="" id="accident_work_sop" class="laboratory_title">
          <label for="accident_work_sop" class="laboratory_label">與工作狀態/流程因素相關</label>
            <div class="laboratory_hide">
              <input type="checkbox" value="1" id="accident_work_sop1">
              <label for="accident_work_sop1">作業流程問題</label>
              <input type="checkbox" value="2" id="accident_work_sop2">
              <label for="accident_work_sop2">人員工作負荷問題</label>
              <input type="checkbox" value="3" id="accident_work_sop3">
              <label for="accident_work_sop3">人力問題</label>
              <input type="checkbox" value="4" id="accident_work_sop4">
              <label for="accident_work_sop4">病人評估問題</label>
              <input type="checkbox" value="5" id="accident_work_sop5">
              <label for="accident_work_sop5">團隊合作問題(含任務分配)</label>
              <input type="checkbox" value="6"  class="otherchk" id="accident_work_sop6">
              <label for="accident_work_sop6">其他 <input type="text" class="othertxt"></label>
            </div>
        </div>
<!--       與器材設備因素相關 -->
        <div>
          <input type="checkbox" value="" id="accident_device_reason" class="laboratory_title">
          <label for="accident_device_reason" class="laboratory_label">與器材設備因素相關</label>
            <div class="laboratory_hide">
              <input type="checkbox" value="1" id="accident_device_reason1">
              <label for="accident_device_reason1">器材設備故障或功能異常</label>
              <input type="checkbox" value="2" id="accident_device_reason2">
              <label for="accident_device_reason2">器材設備設計不良</label>
              <input type="checkbox" value="3" id="accident_device_reason3">
              <label for="accident_device_reason3">資訊系統問題</label>
              <input type="checkbox" value="4" id="accident_device_reason4">
              <label for="accident_device_reason4">未有異常警示系統</label>
              <input type="checkbox" value="5" id="accident_device_reason5">
              <label for="accident_device_reason5">儀器、器械操作不當</label>
              <input type="checkbox" value="6" id="accident_device_reason6">
              <label for="accident_device_reason6">器材設備未定時保養</label>
              <input type="checkbox" value="7" id="accident_device_reason7">
              <label for="accident_device_reason7">缺乏適合之個人安全防護</label>
              <input type="checkbox" value="8" id="accident_device_reason8">
              <label for="accident_device_reason8">缺乏備用系統</label>
              <input type="checkbox" value="9" id="accident_device_reason9">
              <label for="accident_device_reason9">使用醫院違禁設備</label>
              <input type="checkbox" value="10"  class="otherchk" id="accident_device_reason10">
              <label for="accident_device_reason10">其他 <input type="text" class="othertxt"></label>
            </div>
        </div>
<!--       與環境因素相關 -->
        <div>
          <input type="checkbox" value="" id="accident_environment_reason" class="laboratory_title">
          <label for="accident_environment_reason" class="laboratory_label">與環境因素相關</label>
            <div class="laboratory_hide">
              <input type="checkbox" value="1" id="accident_environment_reason1">
              <label for="accident_environment_reason1">環境安全防護設計問題</label>
              <input type="checkbox" value="2" id="accident_environment_reason2">
              <label for="accident_environment_reason2">環境動線問題</label>
              <input type="checkbox" value="3" id="accident_environment_reason3">
              <label for="accident_environment_reason3">照明問題</label>
              <input type="checkbox" value="4" id="accident_environment_reason4">
              <label for="accident_environment_reason4">路面平整度問題</label>
              <input type="checkbox" value="5" id="accident_environment_reason5">
              <label for="accident_environment_reason5">地面濕滑</label>
              <input type="checkbox" value="6" id="accident_environment_reason6">
              <label for="accident_environment_reason6">支撐物問題</label>
              <input type="checkbox" value="7" id="accident_environment_reason7">
              <label for="accident_environment_reason7">天災</label>
              <input type="checkbox" value="8"  class="otherchk" id="accident_environment_reason8">
              <label for="accident_environment_reason8">其他 <input type="text" class="othertxt"></label>
            </div>  
        </div>
<!--       與人員因素相關-->
        <div>
          <input type="checkbox" value="" id="accident_people_reason" class="laboratory_title">
          <label for="accident_people_reason" class="laboratory_label">與人員因素相關</label>
            <div class="laboratory_hide">
              <input type="checkbox" value="1" id="accident_people_reason1">
              <label for="accident_people_reason1">人員疏忽</label>
              <input type="checkbox" value="2" id="accident_people_reason2">
              <label for="accident_people_reason2">臨床訓練問題</label>
              <input type="checkbox" value="3" id="accident_people_reason3">
              <label for="accident_people_reason3">技術操作問題</label>
              <input type="checkbox" value="4" id="accident_people_reason4">
              <label for="accident_people_reason4">環境設備不熟悉</label>
              <input type="checkbox" value="5"  class="otherchk" id="accident_people_reason5">
              <label for="accident_people_reason5">其他 <input type="text" class="othertxt"></label>
            </div>
        </div>
<!--       與溝通因素相關 -->
        <div>
          <input type="checkbox" value="" id="accident_communication_reason" class="laboratory_title">
          <label for="accident_communication_reason" class="laboratory_label">與溝通因素相關</label>
            <div class="laboratory_hide">
              <input type="checkbox" value="1" id="accident_communication_reason1">
              <label for="accident_communication_reason1" style="font-size:16px;">醫療團隊與病人或家屬溝通問題</label>
              <input type="checkbox" value="2" id="accident_communication_reason2">
              <label for="accident_communication_reason2">醫病資訊告知問題</label>
              <input type="checkbox" value="3" id="accident_communication_reason3">
              <label for="accident_communication_reason3">衛教相關問題</label>
              <input type="checkbox" value="4" id="accident_communication_reason4">
              <label for="accident_communication_reason4">醫療團隊間溝通問題</label>
              <input type="checkbox" value="5"  class="otherchk" id="accident_communication_reason5">
              <label for="accident_communication_reason5">其他 <input type="text" class="othertxt"></label>
            </div>
        </div>
<!--       與病人生理及行為因素相關 --> 
        <div>
          <input type="checkbox" value="" id="accident_patient_reason" class="laboratory_title">
          <label for="accident_patient_reason" class="laboratory_label">與病人生理及行為因素相關</label>
            <div class="laboratory_hide">
              <input type="checkbox" value="1" id="accident_patient_reason1">
              <label for="accident_patient_reason1">病人生理或疾病因素</label>
              <input type="checkbox" value="2" id="accident_patient_reason2">
              <label for="accident_patient_reason2">病人飲酒或使用禁藥</label>
              <input type="checkbox" value="3" id="accident_patient_reason3">
              <label for="accident_patient_reason3">未遵從醫囑</label>
              <input type="checkbox" value="4" id="accident_patient_reason4">
              <label for="accident_patient_reason4" style="font-size:16px;">未提供或提供錯誤病史/用藥史</label>
              <input type="checkbox" value="5" class="otherchk" id="accident_patient_reason5">
              <label for="accident_patient_reason5">其他 <input type="text" class="othertxt"></label>
            </div>
        </div>
<!--       與機構和政策因素相關 -->
        <div>
          <input type="checkbox" value="" id="accident_policy_reason" class="laboratory_title">
          <label for="accident_policy_reason" class="laboratory_label">與機構和政策因素相關</label>
            <div class="laboratory_hide">
              <input type="checkbox" value="1" id="accident_policy_reason1">
              <label for="accident_policy_reason1">組織文化問題</label>
              <input type="checkbox" value="2" id="accident_policy_reason2">
              <label for="accident_policy_reason2">管理決策問題</label>
              <input type="checkbox" value="3" id="accident_policy_reason3">
              <label for="accident_policy_reason3" style="font-size:15px;">外部風險(含外包、設備租借問題)</label>
              <input type="checkbox" value="4"  class="otherchk" id="accident_policy_reason4">
              <label for="accident_policy_reason4">其他 <input type="text" class="othertxt"></label>       
            </div>
        </div>
     
       <input type="checkbox" value="不知道" id="accident_reason_unknown" class="laboratory_title">
       <label for="accident_reason_unknown" class="laboratory_label">不知道</label>
       <input type="checkbox" value="其他" class="bigother" id="accident_reason_other" class="laboratory_title">
       <label for="accident_reason_other" class="laboratory_label">其他 <input type="text" class="othertxt"></label>
    </div>

      <div id="describe_area">
         <b>請敘述整起事件經過以及您認為發生本次事件的可能原因。例:警衛巡視時聞到檢查室傳出燃燒異味,檢查發現異味來源為插座,尚無著火。可能與同一插座電線承載過量、離開單位前未關閉電氣設備有關。</b>
        <form id="">
          <textarea style="max-width:820px;width:820px;height:100px;"></textarea>
        </form>   
      </div>
  </body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/JoyceWu/accident_accrecord-vyVRZR */
.main{
  width: 900px;
  height:100%;
  border-width :5px;
  border-radius:7px;
  border-style: solid;
  border-color:#16473E;
  padding:5px;
  font-family:微軟正黑體;
  font-size:18px;
  float:left;
  -moz-user-select : none;
  -webkit-user-select: none;
}
h1{
  text-align:center;
  color:#16473E;
}
#describe_area{
  margin-left:60px;
  width:820px; 
  color:#2F4550;
}
/* 需限制寬度的大區塊 */
.small_width{
  padding-left:60px;
  position:relative;
  width:300px;
  margin:10px 0;
}
/* 不需限制寬度的大區塊 */
.big_width{
  padding-left:60px;
  position:relative;
  width:840px;
  margin:10px 0;
  display:inline-block;
}
/* 中型區塊 */
.fall_medium_wide{
  width:800px;
  padding-left:60px;
}
/* 大型_其他 */
.bigother + label{
  width:216px;
  transition: width 1s;
  
} 
.bigother:checked + label{
  width:725px;
  text-align:left;
  padding-left:20px;
}

.bigother + label input[type="text"]{
  width:0px;
  border:0px;
  transition: width 1s;
  height:25px;
  visibility:hidden;
}
.bigother:checked + label input[type="text"]{
  width:660px;
  border:1px;
  border-radius:3px;
  top:-21x;
  position:relative;
  font-family:微軟正黑體;
  font-size:18px;
  padding:5px;
  margin-left:10px;
  visibility:visible;
}


.fall_medium_wide div div label{
  width:230px;
}
/* 無下層選項_按鈕樣式 */
.laboratory_btntype_nonext input[type="checkbox"] + label ,input[type="radio"] + label{
  font-size: 1em;
  border: 3px solid #2F4550;
  padding: 0.2em;
  cursor: pointer;
  display: inline-block;
  margin:10px 0px 10px 20px;
  border-radius:5px;
  width:130px;
  height:22px;
  vertical-align:middle;
  text-align:center;
  color:#2F4550;
}
.laboratory_btntype_nonext input[type="checkbox"] + label:hover
,input[type="radio"] + label:hover
,input[type="checkbox"] + label:hover{
    background:rgba(255, 193, 94,0.6);
    cursor:pointer;
    border-radius:5px;
}
.laboratory_btntype_nonext input[type="checkbox"]:checked + label ,input[type="radio"]:checked + label,input[type="checkbox"]:checked + label {
    background: #2F4550;
    border:3px solid #2F4550;
    position:relative;
    z-index:9;
    color:#fff;
} 



/* 下層選項_顯示/隱藏 */
.laboratory_title:not(checked) ~ .laboratory_hide {
    display: none;
    transition:display 1s;
    
} 
.laboratory_title:checked ~ .laboratory_hide {       
    display: block;
    
} 
/* 隱藏/顯示 標題 _ 樣式 */
.laboratory_label{
  border: 3px solid #2F4550;
  padding: 0.2em;
  cursor: pointer;
  display: inline-block;
  margin-bottom:10px;
  border-radius:5px;
  margin-left:20px;
  width:216px;
  text-align:center;
  color:#6d6d6d;
  
}


/* 隱藏所有checkbox,所有radiobutton勾選框 */
input[type='checkbox'],input[type="radio"]{
  display:none;
}

/* 隱藏區域 */
.laboratory_hide{
  width:720px; 
  margin-left:40px;
  border:3px solid #2F4550;
  margin-bottom:-15px;
  border-radius:5px;
  padding:20px 5px 5px 5px;
  top:-30px;
  position:relative;
  color:#6d6d6d;
  float:left;
}

.laboratory_hide input[type="checkbox"] + label{
  margin:0px 5px;
  transition:0.3s linear;
  width:224px;
  position:relative;
  float:left;
  padding-left:5px;
  height:24px;
}

.laboratory_hide input[type="checkbox"]:checked + label{
  font-size:18px;
  color:rgb(222,61,61);
  font-weight:bold;
  background:transparent;
  margin:0px 5px;
  border:0px;
  z-index:1;
  cursor:pointer;
}

.laboratory_hide input[type="checkbox"]:checked + label:hover{
  background:rgba(255, 193, 94,0.3);
  height:24px;
}


.laboratory_hide input[type="checkbox"] + label  input[type="text"] , input[type="text"]{
  width:0px;
  transition:0.3s;
  border:0px;
  visibility:hidden;
}
 .laboratory_hide input[type="checkbox"]:checked + label input[type="text"]{
  width:170px;
  border:2px solid rgb(222,61,61);
  border-radius:3px;
  top:-2px;
  position:relative;
  visibility:visible;
}
/* 外部(非大型其他)其他_樣式 (例:事件發生於何項活動過程)*/
.otherchk + label  input[type="text"]{
  width:0px;
  border:0px;
  transition:width 1s;
  visibility:hidden;
}

.otherchk:checked+ label input[type="text"]{
  width:170px;
  border:2px solid #fff;
  border-radius:3px;
  top:-2px;
  position:relative;
  visibility:visible;
}
/* 其他輸入框內容 */
.othertxt{
  padding-left:3px;
  color:#595959;
}

#accident_hint{
  border-radius:50px;
  background:#952726;
  padding: 5px 8px;
  display:inline-block;
  color:#fff;
  position:relative;
  left:50%;
  transform:translateX(-50%);
}

/*Downloaded from https://www.codeseek.co/JoyceWu/accident_accrecord-vyVRZR */
// 小"其他"輸入框_取消勾選即清除
    $(".otherchk").change(function() {
      if($(this).not(":checked")) {
        $(this).parent().children().children(".othertxt").val("");
      }
    });

// 大"其他"輸入框_取消勾選即清除
    $(".bigother").change(function() {
      if($(this).not(":checked")) {
        $(this).parent().children().children(".othertxt").val("");
      }
    });
/*取消選取_細項清除(其他欄也清除)*/
   $(".laboratory_title").change(function() {
        if($(this).not(":checked")) {
            $(this).parent().children(".laboratory_hide").children().prop('checked', false);
            $(this).parent().children(".laboratory_hide").children().children(".othertxt").val("");
        }
    });

Comments