1

При клике на чекбокс радио переключался (в зеленый цвет) и фон менялся у него в белый цвет. кликнул на один чекбокс в этой строке переключился радио. Подскажите пожалуйста!

$('.checkbox label').on('click', function() {
    $(this).parents('tr').toggleClass('active');
    $(this).parents('td:first-child').toggleClass('activ');
    $(this).parents('.switch').toggleClass('activ');
    $(".toggle-bg").toggleClass("bg");
});
table {
  width: 100%;
  font-weight: 500;
  border-collapse: collapse;
  text-align: center;
}

table th,
table td {
  padding-top: 5px;
  padding-bottom: 18px;
}

table th {
  color: #a9adb6;
}

table td {
  font-size: 16px;
}

table td:first-child {
  text-align: left;
}

table th {
  width: 46px;
  text-align: left;
}

table .active {
  background-color: green;
}

table .activ {
  background-color: #f0f1f3;
}

table .checkbox input[type=checkbox]:checked,
table .checkbox input[type=checkbox]:not(:checked) {
  position: absolute;
  left: -9999px
}

table .checkbox input[type=checkbox]:checked+label,
table .checkbox input[type=checkbox]:not(:checked)+label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  top: -14px;
}

table .checkbox input[type=checkbox]:checked+label:before,
table .checkbox input[type=checkbox]:not(:checked)+label:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 16px;
  height: 16px;
  border: 1px solid #d1d4da;
  background-color: transparent;
}

table .checkbox input[type=checkbox]:checked+label:before,
table .checkbox input[type=checkbox]:not(:checked)+label:before {
  border-radius: 4px;
}

table .checkbox input[type=checkbox]:checked+label:after,
.table table .checkbox input[type=checkbox]:not(:checked)+label:after {
  content: "";
  position: absolute;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

table .checkbox input[type=checkbox]:checked+label:after,
.table table .checkbox input[type=checkbox]:not(:checked)+label:after {
  left: 4px;
  top: 3px;
  width: 8px;
  height: 5px;
  border-radius: 1px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

table .checkbox input[type=checkbox]:not(:checked)+label:after {
  opacity: 0
}

.table table .checkbox input[type=checkbox]:checked+label:after {
  opacity: 1;
}

table .checkbox input[type=checkbox]:checked+label:before {
  background-color: #32a961;
  -webkit-transition: .3s all;
  transition: .3s all;
}

table .toggle-bg {
  background: #f0f1f3;
  display: block;
  float: left;
  height: 30px;
  position: relative;
  width: 60px;
  border: 1px solid #d1d4da;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 1px;
  top: 10px;
}

table .toggle-bg input {
  height: 30px;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 60px;
  z-index: 2;
  zoom: 1;
  filter: alpha(opacity=0);
}

table .switch {
  background: orange;
  display: block;
  float: left;
  height: 26px;
  position: relative;
  top: 0;
  -webkit-transition: left .2s ease;
  transition: left .2s ease;
  z-index: 1;
  width: 26px;
  border: 1px solid #d1d4da;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 20px;
}

table .toggle-bg input:checked~.switch {
  left: -1px;
}

table .toggle-bg input~:checked~.switch {
  left: 29px;
  background: green;
}

table .toggle-bg input:checked {
  z-index: 0;
}

table .bg {
  background: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th>
      </th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox" />
        <label for="checkbox"></label>
      </td>
      <td>1</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <div class="toggle-bg">
          <input type="radio" name="toggle" value="off">
          <input type="radio" name="toggle" value="on">
          <span class="switch"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox2" />
        <label for="checkbox2"></label>
      </td>
      <td>2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <div class="toggle-bg">
          <input type="radio" name="toggle1" value="off">
          <input type="radio" name="toggle1" value="on">
          <span class="switch"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="checkbox">
        <input type="checkbox" name="checkbox" id="checkbox3" />
        <label for="checkbox3"></label>
      </td>
      <td>3</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <div class="toggle-bg">
          <input type="radio" name="toggle2" value="off" id="off">
          <input type="radio" name="toggle2" value="on" id="on">
          <span class="switch"></span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

введите сюда описание изображения

1 ответ 1

0

$('.checkbox label').on('click', function () {
    $(this).parents('tr').toggleClass('active');
    $(this).parents('td:first-child').toggleClass('activ');
    $(this).parents('.switch').toggleClass('activ');
    $(this).closest('tr').find(".toggle-bg").toggleClass("bg");       
});

$('[type="checkbox"]').on('change', function () {
    let isChecked = $(this).is(":checked");       
    let $currentTr = $(this).closest('tr');
    $currentTr.find('[type="radio"]').prop('checked', false);
    $currentTr.find('[value="on"]').prop('checked', isChecked);
});
table {
  width:100%;
  font-weight:500;
  border-collapse:collapse;
  text-align:center;
}
table th, table td {
  padding-top:5px;
padding-bottom:18px;
}
table th {
  color:#a9adb6;
}
table td{ 
  font-size:16px;
}
table td:first-child{
  text-align:left;
}
table th{
  width:46px;
  text-align:left;
}
table .active{
  background-color: green;
}
table .activ{
  background-color:#f0f1f3;
}
table .checkbox input[type=checkbox]:checked,table .checkbox input[type=checkbox]:not(:checked){
  position:absolute;left:-9999px
}
table .checkbox input[type=checkbox]:checked+label, table .checkbox input[type=checkbox]:not(:checked)+label {
  display:inline-block;
  position:relative;
  cursor:pointer;
  top:-14px;
}
table .checkbox input[type=checkbox]:checked+label:before, table .checkbox input[type=checkbox]:not(:checked)+label:before{
  content:"";
  position:absolute;
  left:0px;
  top:0px;
  width:16px;
  height:16px;
  border:1px solid #d1d4da;
  background-color:transparent;
}
table .checkbox input[type=checkbox]:checked+label:before, table .checkbox input[type=checkbox]:not(:checked)+label:before{
  border-radius:4px;
}
table .checkbox input[type=checkbox]:checked+label:after,.table table .checkbox input[type=checkbox]:not(:checked)+label:after{
  content:"";
  position:absolute;
  -webkit-transition:all .2s ease;
  transition:all .2s ease;
}
table .checkbox input[type=checkbox]:checked+label:after,.table table .checkbox input[type=checkbox]:not(:checked)+label:after{
  left:4px;
  top:3px;
  width:8px;
  height:5px;
  border-radius:1px;
  border-left:3px solid #fff;
  border-bottom:3px solid #fff;
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}
table .checkbox input[type=checkbox]:not(:checked)+label:after{opacity:0}.table table .checkbox input[type=checkbox]:checked+label:after{
  opacity:1;
}
table .checkbox input[type=checkbox]:checked+label:before{
  background-color:#32a961;
  -webkit-transition:.3s all;
  transition:.3s all;
  }
 table .toggle-bg{
  background:#f0f1f3;
  display:block;
  float:left;
  height:30px;
  position:relative;
  width:60px;
  border:1px solid #d1d4da;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  border-radius:20px;
  padding:1px;top:10px;
}
table .toggle-bg input{
  height:30px;
  left:0;
  margin:0;
  opacity:0;
  padding:0;
  position:absolute;
  top:0;
  width:60px;
  z-index:2;
  zoom:1;
  filter:alpha(opacity=0);
}
table .switch{
  background: orange;
  display:block;
  float:left;
  height:26px;
  position:relative;
  top:0;
  -webkit-transition:left .2s ease;
  transition:left .2s ease;
  z-index:1;
  width:26px;
  border:1px solid #d1d4da;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  border-radius:20px;
}
table .toggle-bg input:checked~.switch{
  left:-1px;
}
table .toggle-bg input~:checked~.switch{
  left:29px;
  background: green;
}
table .toggle-bg input:checked{
  z-index:0;
}
table .bg{
  background:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <table>
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th>
                        </th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="checkbox">
                            <input type="checkbox" name="checkbox" id="checkbox" />
                            <label for="checkbox"></label>
                        </td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>
                            <div class="toggle-bg">
                                <input type="radio" name="toggle" value="off">
                                <input type="radio" name="toggle" value="on">
                                <span class="switch"></span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="checkbox">
                            <input type="checkbox" name="checkbox" id="checkbox2" />
                            <label for="checkbox2"></label>
                        </td>
                        <td>2</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>
                            <div class="toggle-bg">
                                <input type="radio" name="toggle1" value="off">
                                <input type="radio" name="toggle1" value="on">
                                <span class="switch"></span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="checkbox">
                            <input type="checkbox" name="checkbox" id="checkbox3" />
                            <label for="checkbox3"></label>
                        </td>
                        <td>3</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>
                            <div class="toggle-bg">
                                <input type="radio" name="toggle2" value="off" id="off">
                                <input type="radio" name="toggle2" value="on" id="on">
                                <span class="switch"></span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

4

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.