taksit odeme

by salt

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="panel panel-table panel-table-installment">
    <div class="panel-heading">
        <div class="header">
            <h3>Taksit Ödeme</h3>
            <div class="description">
                 Ödeme yapabileceğiniz kredi taksitleri aşağıda sıralanmştır. Lütfen ödemek istediğiniz kredi taksitlerini seçiniz.
            </div>
        </div>
        <div class="action"></div>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Başvuru Detay No</th>
                        <th>Marka - Model - Alt Model</th>
                        <th>Taksit Tarihi</th>
                        <th>Güncel Borç Tutarı</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    
                    <!-- start : credit item -->
                    <tr class="row-table">
                        <td>130000013331</td>
                        <td>TOYOTA AURIS 1.33 COMFORT TEST ALT MODEL UZUNLUK TEST ALT MODEL UZUNLUK TEST ALT MODEL UZUNLUK</td>
                        <td>12.07.2017</td>
                        <td>10.500.00 TL</td>
                        <td>
                            <div class="input-custom">
                                <input type="checkbox" id="chk1" value="1"/>
                                <label for="chk1"></label>
                            </div>
                        </td>
                    </tr>
                    <!-- end : credit item -->


                    <!-- start : credit item -->
                    <tr class="row-table">
                        <td>130000013331</td>
                       ...

CSS

/****************************

 TEB Appendix.css

*****************************/


.login-container .login-box .sifre-giris .btn-cont #ContentPlaceHolderLogin_ButtonGiris{
	width:160px;
}
.login-container .login-box .sifre-giris .btn-cont #ContentPlaceHolderLogin_ButtonTemizle{
	clear:both!important;
	padding: 5px 10px!important;
    font-size: 12px!important;
    line-height: 1.5!important;
    border-radius: 3px!important;
}







.input-custom label {
    width: 100%;
    font-weight: normal;
    display:inline-block;
    text-align:center;
}
.input-custom input[type="radio"]:empty, 
.input-custom input[type="checkbox"]:empty {
    display: none;
}
.input-custom input[type="radio"]:empty ~ label,
.input-custom input[type="checkbox"]:empty ~ label {
      position: relative;
      line-height: 22px;
      font-size: 22px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      color:#fff;
      width:22px;
      height:22px;
      display:inline-block;
      margin:0;
}
.input-custom input[type="radio"]:empty ~ label:before,
.input-custom input[type="checkbox"]:empty ~ label:before {
      content: '';
      position: relative;
      display: inline-block;
      width: 22px;
      height: 22px;
      text-align:center;
      color:#fff;
      font-size:16px!important;
      line-height:22px;
      border-radius:4px;
}
.input-custom input[type="radio"]:empty ~ label:before,
.input-custom input[type="checkbox"]:empty ~ label:before {
      content: '\A';
}
.input-custom input[type="radio"]:checked ~ label:before,
.input-custom input[type="checkbox"]:checked ~ label:before {
      content: '\e013'!important;
      font-family:'Glyphicons Halflings'!important;

}








.panel-table{
    margin-bottom:30px;
      -webkit-box-shadow:none;
            box-shadow:none;
}
.panel-table .panel-heading{
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
   ...

JavaScript

$(function () {
       $(".table .row-table input").on("change",function(e){
       if($(this).type=="radio"){
          $(this).closest(".table").find(".row-table.active").removeClass("active");
       }
       if($(this).is(":checked")){
          $(this).closest(".row-table").addClass("active");
       }else{
          $(this).closest(".row-table").removeClass("active");
       }
    }).trigger("change");
    
    $('[data-toggle="popover"]').popover();
     
});