车林通购车之家--购车计算器模块--商业保险

//insurance.twig

 <div class="jsq-jiange-box clearfix font24 color-gray">
          <span class="left-tab fl">商业保险</span>
        <span class="left-tab fr">小计：<span id="shangYeXian2">8,246</span></span>
      </div>
      <div class="jsq-tt-first clearfix font24 color-black">
          <h3 class="font24 fl">推荐套餐</h3>
        <div class="jsq-tab-box font24 color-blue fr">
            <a id="jibenX" href="javascript:void(0);" onclick="JiBenX()">基本险</a>
                <a id="jingjiX" href="javascript:void(0);" onclick="JingJiX()">经济险</a>
                <a id="quanX" href="javascript:void(0);" onclick="QuanX()">全险</a>
        </div>
      </div>
    
      <div id="liDiSanZheX" class="">
        <div class="hj-user-info hj-user-info-box font28">
          <div class="jsq-item-check fl">
              <input id="chkDiSanZheX1" type="checkbox" class="choose-box" checked="" style="opacity:0" onclick="dszzrx();"/><span></span>
          </div>
          <a href="javascript:;" class="model-show-dszzrx">
              <label class="color-light-gray" >第三者责任险</label>
              <span id="diSanZhePeiFu" class="small-exp font24 color-gray">赔付20万</span>
              <span id="diSanZheX" class="act fr">1,100</span>
              <i class="arrow-icon show-next-icon right-w"></i>
          </a>
        </div>
      </div>
      <div id="liCheSunX" class="">
        <div class="hj-user-info hj-user-info-box font28">
          <div class="jsq-item-check fl">
              <input id="chkCheSunShiX1" type="checkbox" class="choose-box" checked="" style="opacity:0" onclick="csx();"/><span></span>
          </div>
          <label class="color-light-gray">车辆损失险</label>
          <span id="cheSunShiX" class="act fr">1,100</span>
        </div>
      </div>
      <div id="liBuJiX" class="">
        <div class="hj-user-info hj-user-info-box font28">
          <div class="jsq-item-check fl">
              <input id="chkBuJiX1" type="checkbox" class="choose-box" checked="" style="opacity:0"/><span></span>
          </div>
          <label class="color-light-gray">不计免赔特约险</label>
          <span id="buJiX" class="act fr">864</span>
        </div>
      </div>
      <div id="liQuanCheX" class="">
        <div class="hj-user-info hj-user-info-box font28">
          <div class="jsq-item-check fl">
              <input id="chkQuanCheX1" type="checkbox" class="choose-box" checked="" style="opacity:0"/><span></span>
          </div>
          <label class="color-light-gray">全车盗抢险</label>
          <span id="quanCheX" class="act fr">1,100</span>
        </div>
      </div>
      <div id="liBoLiX" class="">
        <div class="hj-user-info hj-user-info-box font28">
          <div class="jsq-item-check fl">
              <input id="chkBoLiX1" type="checkbox" class="choose-box" checked="" style="opacity:0" onclick="blddbsx()"/><span></span>
          </div>
          <a href="javascript:;" class="model-show-blddpsx">
              <label class="color-light-gray">玻璃单独破碎险</label>
              <span id="boLiPeiFu" class="small-exp font24 color-gray">国产玻璃</span>
              <span id="boLiX" class="act fr">1,100</span>
              <i class="arrow-icon show-next-icon right-w"></i>
          </a>
        </div>
      </div>
      <div id="liZiRanX" class="">
        <div class="hj-user-info hj-user-info-box font28">
          <div class="jsq-item-check fl">
              <input id="chkZiRanX1" type="checkbox" class="choose-box" checked="" style="opacity:0"/><span></span>
          </div>
          <label class="color-light-gray">自燃损失险</label>
          <span id="ziRanX" class="act fr">864</span>
        </div>
      </div>
      <div id="liEngineX" class="">
        <div class="hj-user-info hj-user-info-box font28">
          <div class="jsq-item-check fl">
              <input id="chkEngineX1" type="checkbox" class="choose-box" checked="" style="opacity:0"/><span></span>
          </div>
          <label class="color-light-gray">涉水险/发动机特别损失险</label>
          <span id="engineX" class="act fr">1,100</span>
        </div>
      </div>
      <div id="liCheShenX" class="">
        <div class="hj-user-info hj-user-info-box font28">
          <div class="jsq-item-check fl">
              <input id="chkCheShenX1" type="checkbox" class="choose-box" checked="" style="opacity:0" onclick="cshhx();"/><span></span>
          </div>
          <a href="javascript:;" class="model-show-cshhx">
              <label class="color-light-gray">车身划痕险</label>
              <span id="cheShenPeiFu" class="small-exp font24 color-gray">赔付5千</span>
              <span id="cheShenX" class="act fr">1,100</span>
              <i class="arrow-icon show-next-icon right-w"></i>
          </a>
        </div>
      </div>
      <div  id="liSiJiX" class="">
        <div class="hj-user-info hj-user-info-box font28">
          <div class="jsq-item-check fl">
              <input id="chkSiJiX1" type="checkbox" class="choose-box" checked="" style="opacity:0" onclick="sjzwx();"/><span></span>
          </div>
          <a href="javascript:;" class="model-show-sjzwzrx">
              <label class="color-light-gray">司机座位责任险</label>
              <span id="sijiPeiFu" class="small-exp font24 color-gray">赔付2万</span>
              <span id="siJiX" class="act fr">1,100</span>
              <i class="arrow-icon show-next-icon right-w"></i>
          </a>
        </div>
      </div>
      <div  id="liChengKeX" class="">
        <div class="hj-user-info hj-user-info-box font28">
          <div class="jsq-item-check fl">
              <input id="chkChengKeX1" type="checkbox" class="choose-box" checked="" style="opacity:0" onclick="ckzwx();"/><span></span>
          </div>
          <a href="javascript:;" class="model-show-ckzwzrx">
              <label class="color-light-gray">乘客座位责任险</label>
              <span id="chengkePeiFu" class="small-exp font24 color-gray">赔付2万</span>
              <span id="chengKeX" class="act fr">1,100</span>
              <i class="arrow-icon show-next-icon right-w"></i>
          </a>
        </div>
      </div>
{{ use('common\widgets\JsBlock') }}
{{ js_block_begin() }}
<script type="text/javascript">
    //第三者责任险 车辆损失险 不计免赔
    function JiBenX() {
        //alert("JiBenX");
        $('#chkDiSanZheX1').prop("checked",true);
        $('#chkCheSunShiX1').prop("checked",true);
        $('#chkBuJiX1').prop("checked", true);

        $('#chkQuanCheX1').prop("checked",false);
        $('#chkBoLiX1').prop("checked",false);
        $('#chkZiRanX1').prop("checked", false);
        $('#chkEngineX1').prop("checked",false);
        $('#chkChengKeX1').prop("checked", false);
        $('#chkSiJiX1').prop("checked",false);
        $('#chkCheShenX1').prop("checked",false);
        $(".hj-user-info a label").prop("class","color-light-gray");
        $(".hj-user-info label").prop("class","color-light-gray");
        $("#liBoLiX a i").remove();
        $("#liCheShenX a i").remove();
        $("#liChengKeX a i").remove();
        $("#liSiJiX a i").remove();
        calcAutoAll();
        calcLoanValue();
    }
    //第三者责任险 车辆损失险 不计免赔 乘客坐位责任险 司机坐位责任险
    function JingJiX() {
        //alert("JingJiX");
        $('#chkDiSanZheX1').prop("checked",  true);
        $('#chkCheSunShiX1').prop("checked", true);
        $('#chkBuJiX1').prop("checked", true);
        $('#chkChengKeX1').prop("checked",true);
        $('#chkSiJiX1').prop("checked", true);

        $('#chkQuanCheX1').prop("checked", false);
        $('#chkBoLiX1').prop("checked", false);
        $('#chkZiRanX1').prop("checked", false);
        $('#chkCheShenX1').prop("checked",false);
        $('#chkEngineX1').prop("checked",false);
        $(".hj-user-info a label").prop("class","color-light-gray");
        $(".hj-user-info label").prop("class","color-light-gray");
        $("#liBoLiX a i").remove();
        $("#liCheShenX a i").remove();
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liDiSanZheX a");
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liChengKeX a");
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liSiJiX a");
        calcAutoAll();
        calcLoanValue();
    }

    function QuanX() {
        //$("[type='checkbox']").attr("checked",true);

        $('#chkDiSanZheX1').prop("checked", true);
        $('#chkCheSunShiX1').prop("checked", true);
        $('#chkBuJiX1').prop("checked",true);
        $('#chkChengKeX1').prop("checked",true);
        $('#chkSiJiX1').prop("checked",true);
        $('#chkQuanCheX1').prop("checked",true);
        $('#chkBoLiX1').prop("checked", true);
        $('#chkZiRanX1').prop("checked", true);
        $('#chkCheShenX1').prop("checked", true);
        $('#chkEngineX1').prop("checked", true);
        $(".hj-user-info a label").prop("class","color-light-gray");
        $(".hj-user-info label").prop("class","color-light-gray");
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liDiSanZheX a");
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liBoLiX a");
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liCheShenX a");
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liDiSanZheX a");
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liChengKeX a");
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liSiJiX a");
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liCheShenX a");
        calcAutoAll();
        calcLoanValue();
    }     
</script>
<script>
 function csx(){
     if($("#chkCheSunShiX1").is(':checked')==false){
        $("#liBuJiX").find("label").css("color","#CCCCCC");
        $("#liQuanCheX").find("label").css("color","#CCCCCC");
        $("#liBoLiX").find("label").css("color","#CCCCCC");
        $("#liEngineX").find("label").css("color","#CCCCCC");
        $("#liCheShenX").find("label").css("color","#CCCCCC");
        
        $("#liBuJiX").find("label").removeAttr("class");
        $("#liQuanCheX").find("label").removeAttr("class");
        $("#liBoLiX").find("label").removeAttr("class");
        $("#liEngineX").find("label").removeAttr("class");
        $("#liCheShenX").find("label").removeAttr("class");
        
        $('#chkBuJiX1').prop("checked", false);
        $('#chkQuanCheX1').prop("checked", false);
        $('#chkBoLiX1').prop("checked", false);
        $('#chkCheShenX1').prop("checked",false);
        $('#chkEngineX1').prop("checked",false);
        
        $("#liBoLiX a i").remove();
        $("#liCheShenX a i").remove();
        InitTagStatus();
        calcAutoAll();
        calcLoanValue();
        $("#chkBuJiX1").prop("disabled","disabled");
        $('#chkQuanCheX1').prop("disabled","disabled");
        $('#chkBoLiX1').prop("disabled","disabled");
        $('#chkCheShenX1').prop("disabled","disabled");
        $('#chkEngineX1').prop("disabled","disabled");     
     }else{
        $("#liBuJiX").find("label").prop("class","color-light-gray");
        $("#liQuanCheX").find("label").prop("class","color-light-gray");
        $("#liBoLiX").find("label").prop("class","color-light-gray");
        $("#liEngineX").find("label").prop("class","color-light-gray");
        $("#liCheShenX").find("label").prop("class","color-light-gray");
        
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liBoLiX a");
        $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liCheShenX a");
        
        $("#chkBuJiX1").removeAttr("disabled")
        $('#chkQuanCheX1').removeAttr("disabled");
        $('#chkBoLiX1').removeAttr("disabled");
        $('#chkCheShenX1').removeAttr("disabled");
        $('#chkEngineX1').removeAttr("disabled");
        InitTagStatus();
        calcAutoAll();
        calcLoanValue();
     }
 }  
 function blddbsx(){    
        if($("#chkBoLiX1").is(':checked')==false){   
             $("#liBoLiX a i").remove();
        }else{ 
             $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liBoLiX a");
        } 
        InitTagStatus();
        calcAutoAll();    
        calcLoanValue(); 
 }
 function dszzrx(){ 
        if($("#chkDiSanZheX1").is(':checked')==false){   
             $("#liDiSanZheX a i").remove();
             $("#liBuJiX").find("label").css("color","#CCCCCC");
             $("#liBuJiX").find("label").removeAttr("class");
             $('#chkBuJiX1').prop("checked", false);
             $('#chkBuJiX1').attr("disabled","disabled");
        }else{ 
             $("#liBuJiX").find("label").prop("class","color-light-gray");
             $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liDiSanZheX a");
             $('#chkBuJiX1').removeAttr("disabled");
        } 
        InitTagStatus();
        calcAutoAll();   
        calcLoanValue();  
 }
 function ckzwx(){     
        if($("#chkChengKeX1").is(':checked')==false){   
             $("#liChengKeX a i").remove();
        }else{ 
             $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liChengKeX a");
        } 
        InitTagStatus();
        calcAutoAll();  
        calcLoanValue();   
 }
 function sjzwx(){   
        if($("#chkSiJiX1").is(':checked')==false){   
             $("#liSiJiX a i").remove();
        }else{ 
             $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liSiJiX a");
        } 
        InitTagStatus();
        calcAutoAll();    
        calcLoanValue(); 
 }
 function cshhx(){   
        if($("#chkCheShenX1").is(':checked')==false){   
             $("#liCheShenX a i").remove();
        }else{ 
             $('<i class="arrow-icon show-next-icon right-w"></i>').appendTo("#liCheShenX a");
        } 
        InitTagStatus();
        calcAutoAll();   
        calcLoanValue();  
 }
</script>
{{ js_block_end() }}