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-unchecked"></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

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



        



        .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;
        }

        

        .col-xs-12.btn.btn-warning.item {
            padding-left:0px;
            padding-right:0px;
        }

JavaScript

//Bootstrap按鈕的群組效果
        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("click", function () {
                var $this = $(this);

                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 {
                        $this.parents(".question").css("background", "none");
                    }
                }
                if ($this.hasClass("3")) {
                    CheckBoxGroupAction($this);
                   
                    if ($this.find("i").hasClass("glyphicon-check")) {
                        $this.parents(".question").css("background", "rgba(217,83,79,0.65)");
                    } else {
                        $this.parents(".question").css("background", "none");
                    }
                }

            });
        }
        selectaction();