JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="A q1 question col-lg-4" style="">1、GHP建築設施維護與保養及流程動線不佳
            <div class="select sn_A1"><div class="col-xs-4"><div class="col-xs-12 btn btn-success item 1"><i class="glyphicon glyphicon-check"></i>符合</div></div><div class="col-xs-4"><div class="col-xs-12  btn btn-warning item 2"><i class="glyphicon glyphicon-unchecked"></i>部分符合</div></div><div class="col-xs-4"><div class="col-xs-12 btn btn-danger item 3"><i class="glyphicon glyphicon-unchecked"></i>不符合</div></div></div><div class="desc input-group"><div class="desctitle input-group-addon">備註</div><div class="desctext sn_A1"><input type="text" placeholder="請明列建議改善原因或不適用" class="form-control"></div></div></div>

CSS

.topic {
            margin-top: 20px;
            margin-bottom: 5px;

        }

        	.question,.haccptip{
                font-family:微軟正黑體;line-height:40px;float:left;
  border: 1px #555 solid;
  
        	}



        .floatcontroller {
                font-size: 10px;
                width:94px;
                float:right;
                position:absolute;
        }
        .controlitem {
            cursor :pointer;
            font-size: 10px;
            width: 43px;
            float: left;
            border:1px #333 solid ;
            margin-left: -1px;
            margin-top: -1px;
        }



            .controlitem .sn,.controlitem .result {

                width: 24px;
                float: left;
                line-height: 20px;
                text-align: center;
            }

        .controlitem .result {
            width: 19px;
            background:#ccc;
        }

        .button {
      
                margin-bottom: 15px;
    }



        .input-group {
            line-height:32px;
                background: #d8ebfb;
                border-radius:5px;
        }
         .input-group span {
           padding-left:5px;
        }

        .RecordInfo .input-group {
            margin-bottom:15px;
        }

                 .input-group-addon {
    color: rgb(255, 255, 255);
    background-color: rgb(50, 118, 177);
    border-color: rgb(40, 94, 142);
}

        .select,.desc  {
                float: left;
                width: 100%;
                margin-bottom: 15px;
        }

        .Ot {
            padding:0px;
         border:0px;
         
        }

            .Ot textarea {
                width:100%;
               height:140px;
               padding:5px;
            }

        .col-xs-12.btn.btn-warning.item {
            padding-left:0px;
            padding-right:0px;
        }
        #function {
            float: left;
            z-index: 9;
            position: absolute;
            top: 114px;
   ...

JavaScript

//按鈕的群組效果
        function CheckBoxGroupAction($this) {
            var $i = $this.find("i");
            $this.parent().siblings().find("i").removeClass("glyphicon-check").addClass("glyphicon-unchecked");
            if ($i.hasClass("glyphicon-unchecked")) {
                $i.removeClass("glyphicon-unchecked").addClass("glyphicon-check");
            } else {
                $i.removeClass("glyphicon-check").addClass("glyphicon-unchecked");
            }

        }
        

        //問卷選項的操作效果
        function selectaction() {
            $(".question .select .item").on("mouseover", function () {
                var $this = $(this);
                var tbb = "";
                if ($this.hasClass("1")) {
                    //tbb = "5px solid rgba(25,225,25,1)";
                }
                if ($this.hasClass("2")) {
                    //tbb = "5px solid rgba(225,225,25,1)";
                }
                if ($this.hasClass("3")) {
                   //tbb = "5px solid rgba(225,25,25,1)";
                }



            }).on("mouseleave", function () {

            }).on("click", function () {
                var $this = $(this);
                var tbb = "";
                var ccolor = "";
              
             
                

                if ($this.hasClass("1")) {
                    CheckBoxGroupAction($this);
                    if ($this.find("i").hasClass("glyphicon-check")) {
                        $this.parents(".question").css("background", "rgba(92,184,92,0.65)");
                    } else {
                        $this.parents(".question").css("background", "none");
                    }
                }
                if ($this.hasClass("2")) {
                    CheckBoxGroupAction($this);
                   
                    if ($this.find("i").hasClass("glyphicon-check")) {
                        $this.parents(".question").css("background", "rgba(240,173,78,0.65)");
                    } else {
                ...