БЛОГ НА HUSL


Добавление класса родительскому элементу по клику на checkbox

Автор вопроса: ws17

Есть table, в нем есть строки, в каждой строке по 4 поля, первое поле это галочка, по дефолту галочка стоит, при снятии, я хочу всей строке tr, применять класс, стиль прозрачности, как это реализовать?

Форма не совсем простая, извиняюсь что сразу не написал, при клике на кнопка добавить размер, клонируется строка с полями.

Вроде можно на css такое сделать.

Класс прозрачности

.offf{
  opacity:0.5;
  -moz-opacity:0.5;
  filter:alpha(opacity=50);
}


table td {
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 4px;
      padding-bottom: 4px;
      color: #202020;
    }
    table {
      border: 1px solid #E5E5E5;
    }
    .table th {
      height: auto;
      font-size: 12px;
      padding: 5px 10px 5px;
      border-bottom: 0;
      color: #000000;
      vertical-align: middle;
    }
    .nopadding .table {
      margin-bottom: 0;
    }

    .nopadding .table-bordered {
      border: 0;
    }
    .form-actions input[type=texttttaf] {
      font-size: 16px;
      height: 30px;
      vertical-align: middle;
      width: 100%;
      padding: 0px 8px 0px 8px;
      border-radius: 3px;
      border: 1px solid #CCCCCC;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .table th{
      background-color: #efefef;
      background-image: -linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#eaeaea', GradientType=0);
      /* IE6-9 */
      border-bottom: 1px solid #CDCDCD;
      height: 36px;
    }
    
.btn-primary{
font-size: 16px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      display:inline-block;
      margin-top: 20px;
      padding: 0 30px 0 30px;
      background: #0078B9;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<table class="table table-bordered table-striped" style="width:450px">
          <thead>
            <tr>
              <th width="30"></th>
              <th>Размер</th>
              <th width="120">Цена</th>
              <th width="90"></th>
            </tr>
          </thead>
          <tbody class="addlist">
                <tr>
                  <td style="text-align:center">
                    <input type="checkbox" name="show_cat" value="1" checked="checked">
                  </td>
                  <td>
                    <input type="texttttaf" value="" name="" />
                  </td>
                  <td>
                    <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
                  </td>
                  <td style="text-align:center">
                    <span class="btn btn-danger">Удалить</span>
                  </td>
                </tr>
          </tbody>
        </table>
            <a title="Добавить размер" class="btn btn-primary addrazmer">Добавить размер</a>
    <script>
      $(function() {
        $(document).on('click', '.addrazmer', function() {

          let obj = `
        <tr>
          <td style="text-align:center">
           <input type="checkbox" name="show_tov" value="1" checked="checked">
          </td>
          <td>
            <input type="texttttaf" name="items[name][]" />
          </td>
          <td>
            <input type="texttttaf" style="width:70px; color: #FF2525;" name="items[price][]" /> руб
          </td>
          <td style="text-align:center">
           <a title="Удалить" class="btn btn-danger itemdel">Удалить</a>
          </td>
        </tr>
  `;
          const newRow = $(obj);

          $('.addlist').append(newRow);
        });
      });
    </script>


Источник

Ответы (2 шт):

Автор решения: Макс к

Наверное самое простое решение - на JS

  1. Найдите все чекбоксы
  2. Переберите их
  3. Повесьте слушатели событий
  4. Найдите целевую tr-ку
  5. Тогглите нужный вам класс.

let checkBoxes = document.querySelectorAll('input[name="show_cat"]')

for (inp of checkBoxes){
inp.addEventListener('click', (e)=> {
let eventTarget = e.target.parentElement.parentElement;
eventTarget.classList.toggle('offf')
})
}
table td {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  color: #202020;
}
table {
  border: 1px solid #E5E5E5;
}
.table th {
  height: auto;
  font-size: 12px;
  padding: 5px 10px 5px;
  border-bottom: 0;
  color: #000000;
  vertical-align: middle;
}
.nopadding .table {
  margin-bottom: 0;
}

.nopadding .table-bordered {
  border: 0;
}
.form-actions input[type=texttttaf] {
  font-size: 16px;
  height: 30px;
  vertical-align: middle;
  width: 100%;
  padding: 0px 8px 0px 8px;
  border-radius: 3px;
  border: 1px solid #CCCCCC;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.table th{
  background-color: #efefef;
  background-image: -linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#eaeaea', GradientType=0);
  /* IE6-9 */
  border-bottom: 1px solid #CDCDCD;
  height: 36px;
}

.offf{
 opacity:0.5;
  -moz-opacity:0.5;
  filter:alpha(opacity=50);
}
<table class="table table-bordered table-striped" style="width:450px">
      <thead>
        <tr>
          <th width="30"></th>
          <th>Размер</th>
          <th width="120">Цена</th>
          <th width="90"></th>
        </tr>
      </thead>
      <tbody class="addlist">
            <tr>
              <td style="text-align:center">
                <input type="checkbox" name="show_cat" value="1" checked="checked">
              </td>
              <td>
                <input type="texttttaf" value="" name="" />
              </td>
              <td>
                <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
              </td>
              <td style="text-align:center">
                <span class="btn btn-danger">Удалить</span>
              </td>
            </tr>
            
                        <tr>
              <td style="text-align:center">
                <input type="checkbox" name="show_cat" value="1" checked="checked">
              </td>
              <td>
                <input type="texttttaf" value="" name="" />
              </td>
              <td>
                <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
              </td>
              <td style="text-align:center">
                <span class="btn btn-danger">Удалить</span>
              </td>
            </tr>
            
                        <tr>
              <td style="text-align:center">
                <input type="checkbox" name="show_cat" value="1" checked="checked">
              </td>
              <td>
                <input type="texttttaf" value="" name="" />
              </td>
              <td>
                <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
              </td>
              <td style="text-align:center">
                <span class="btn btn-danger">Удалить</span>
              </td>
            </tr>
            
                        <tr>
              <td style="text-align:center">
                <input type="checkbox" name="show_cat" value="1" checked="checked">
              </td>
              <td>
                <input type="texttttaf" value="" name="" />
              </td>
              <td>
                <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
              </td>
              <td style="text-align:center">
                <span class="btn btn-danger">Удалить</span>
              </td>
            </tr>
            
                        <tr>
              <td style="text-align:center">
                <input type="checkbox" name="show_cat" value="1" checked="checked">
              </td>
              <td>
                <input type="texttttaf" value="" name="" />
              </td>
              <td>
                <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
              </td>
              <td style="text-align:center">
                <span class="btn btn-danger">Удалить</span>
              </td>
            </tr>

      </tbody>
    </table>

→ Ссылка
Автор решения: Alexandr

Проверяйте 'checked' и у родителя меняйте 'opacity'.

Пример реализации:

$(function() {
        $(document).on('click', '.addrazmer', function() {

          let obj = `
        <tr>
          <td style="text-align:center">
           <input type="checkbox" name="show_cat" value="1" checked="checked">
          </td>
          <td>
            <input type="texttttaf" name="items[name][]" />
          </td>
          <td>
            <input type="texttttaf" style="width:70px; color: #FF2525;" name="items[price][]" /> руб
          </td>
          <td style="text-align:center">
           <a title="Удалить" class="btn btn-danger itemdel">Удалить</a>
          </td>
        </tr>
  `;
          const newRow = $(obj);

          $('.addlist').append(newRow);
          addListener()
        });
      });
      
      


document.addEventListener('DOMContentLoaded' , addListener)




function addListener(){
  let checkBxs = [...document.querySelectorAll('[name="show_cat"]')]

  checkBxs.forEach(checkBx => {
    checkBx.addEventListener('click', () => event.target.closest('tr').style.opacity =   !event.target.checked ?  0.1 : 1)
  })
}
table td {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 4px;
  padding-bottom: 4px;
  color: #202020;
}
table {
  border: 1px solid #E5E5E5;
}
.table th {
  height: auto;
  font-size: 12px;
  padding: 5px 10px 5px;
  border-bottom: 0;
  color: #000000;
  vertical-align: middle;
}
.nopadding .table {
  margin-bottom: 0;
}

.nopadding .table-bordered {
  border: 0;
}
.form-actions input[type=texttttaf] {
  font-size: 16px;
  height: 30px;
  vertical-align: middle;
  width: 100%;
  padding: 0px 8px 0px 8px;
  border-radius: 3px;
  border: 1px solid #CCCCCC;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.table th{
  background-color: #efefef;
  background-image: -linear-gradient(top, #fdfdfd 0%, #eaeaea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#eaeaea', GradientType=0);
  /* IE6-9 */
  border-bottom: 1px solid #CDCDCD;
  height: 36px;
}


.offf{
  opacity:0.5;
  -moz-opacity:0.5;
  filter:alpha(opacity=50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-striped" style="width:450px">
      <thead>
        <tr>
          <th width="30"></th>
          <th>Размер</th>
          <th width="120">Цена</th>
          <th width="90"></th>
        </tr>
      </thead>
      <tbody class="addlist">
            <tr>
              <td style="text-align:center">
                <input type="checkbox" name="show_cat" value="1" checked="checked">
              </td>
              <td>
                <input type="texttttaf" value="" name="" />
              </td>
              <td>
                <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
              </td>
              <td style="text-align:center">
                <span class="btn btn-danger">Удалить</span>
              </td>
            </tr>
            
                        <tr>
              <td style="text-align:center">
                <input type="checkbox" name="show_cat" value="1" checked="checked">
              </td>
              <td>
                <input type="texttttaf" value="" name="" />
              </td>
              <td>
                <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
              </td>
              <td style="text-align:center">
                <span class="btn btn-danger">Удалить</span>
              </td>
            </tr>
            
                        <tr>
              <td style="text-align:center">
                <input type="checkbox" name="show_cat" value="1" checked="checked">
              </td>
              <td>
                <input type="texttttaf" value="" name="" />
              </td>
              <td>
                <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
              </td>
              <td style="text-align:center">
                <span class="btn btn-danger">Удалить</span>
              </td>
            </tr>
            
                        <tr>
              <td style="text-align:center">
                <input type="checkbox" name="show_cat" value="1" checked="checked">
              </td>
              <td>
                <input type="texttttaf" value="" name="" />
              </td>
              <td>
                <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
              </td>
              <td style="text-align:center">
                <span class="btn btn-danger">Удалить</span>
              </td>
            </tr>
            
                        <tr>
              <td style="text-align:center">
                <input type="checkbox" name="show_cat" value="1" checked="checked">
              </td>
              <td>
                <input type="texttttaf" value="" name="" />
              </td>
              <td>
                <input type="texttttaf" style="width:70px; color: #FF2525;" value="" name="" /> руб
              </td>
              <td style="text-align:center">
                <span class="btn btn-danger">Удалить</span>
              </td>
            </tr>

      </tbody>
    </table>
    <a title="Добавить размер" class="btn btn-primary addrazmer">Добавить размер</a>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.