如果检查输入，则向元素添加类

Question

基本上我喜欢在检查输入时为元素添加一个类。

示例：

如果选中ID为“option1”的复选框，我想将“active”类添加到ID为“slct-1”的元素中。如果取消选中该复选框，我想再次添加“活动”类。

.slct-feedback{
margin-bottom: 40px;
}

.slct-option.active{
color: #0095ff;
}

<div class="slct-feedback">
<div class="slct-option active" id="slct-1">Option 1</div>
<div class="slct-option" id="slct-2">Option 2</div>
<div class="slct-option" id="slct-3">Option 3</div>
</div>

<label class="option-checkbox">
<span class="sub">Option 1</span>
<input type="checkbox" name="options" value="1" id="option1" checked>
</label>

<label class="option-checkbox">
<span class="sub">Option 2</span>
<input type="checkbox" name="options" value="2" id="option2">
</label>

<label class="option-checkbox">
<span class="sub">Option 3</span>
<input type="checkbox" name="options" value="3" id="option3">
</label>

Answer 1

要执行此操作，您可以使用toggleClass()方法以及复选框的checked属性来设置是应添加还是删除类。试试这个：

＆＃13;

＆＃13;

$('#option1').change(function() {
  $('#slct-1').toggleClass('active', this.checked);
});

＆＃13;

.slct-feedback { margin-bottom: 40px; }
.slct-option.active { color: #0095ff; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slct-feedback">
  <div class="slct-option active" id="slct-1">Option 1</div>
  <div class="slct-option" id="slct-2">Option 2</div>
  <div class="slct-option" id="slct-3">Option 3</div>
</div>

<label class="option-checkbox">
  <span class="sub">Option 1</span>
  <input type="checkbox" name="options" value="1" id="option1" checked>
</label>

<label class="option-checkbox">
  <span class="sub">Option 2</span>
  <input type="checkbox" name="options" value="2" id="option2">
</label>

<label class="option-checkbox">
  <span class="sub">Option 3</span>
  <input type="checkbox" name="options" value="3" id="option3">
</label>

＆＃13;

＆＃13;

＆＃13;

请注意，如果您打算将每个复选框与slct-option div相关联，则可以使用元素的索引来对代码进行干扰，而不必重复相同的事件处理程序： / p>

＆＃13;

＆＃13;

$('.option').change(function() {
  $('.slct-option').eq($(this).index('.option')).toggleClass('active', this.checked);
}).change();

＆＃13;

.slct-feedback { margin-bottom: 40px; }
.slct-option.active { color: #0095ff; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slct-feedback">
  <div class="slct-option">Option 1</div>
  <div class="slct-option">Option 2</div>
  <div class="slct-option">Option 3</div>
</div>

<label class="option-checkbox">
  <span class="sub">Option 1</span>
  <input type="checkbox" name="options" value="1" class="option" checked>
</label>

<label class="option-checkbox">
  <span class="sub">Option 2</span>
  <input type="checkbox" name="options" value="2" class="option">
</label>

<label class="option-checkbox">
  <span class="sub">Option 3</span>
  <input type="checkbox" name="options" value="3" class="option">
</label>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用input:checkbox

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $('div.slct-option').addClass("active");
    }
});

参考Jquery API ducumentation input:checked

Answer 3

您可以为所有输入编写事件复选框，并使用您可以添加/删除课程的值来激活＆＃39;到#slct-元素。

＆＃13;

＆＃13;

$('input[type=checkbox]').click(function(){
  if(this.checked){
    $('#slct-'+this.value).addClass('active');
  }else{
    $('#slct-'+this.value).removeClass('active');
  }
});

＆＃13;

.slct-feedback{
margin-bottom: 40px;
}

.slct-option.active{
color: #0095ff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="slct-feedback">
<div class="slct-option active" id="slct-1">Option 1</div>
<div class="slct-option" id="slct-2">Option 2</div>
<div class="slct-option" id="slct-3">Option 3</div>
</div>

<label class="option-checkbox">
<span class="sub">Option 1</span>
<input type="checkbox" name="options" value="1" id="option1" checked>
</label>

<label class="option-checkbox">
<span class="sub">Option 2</span>
<input type="checkbox" name="options" value="2" id="option2">
</label>

<label class="option-checkbox">
<span class="sub">Option 3</span>
<input type="checkbox" name="options" value="3" id="option3">
</label>

＆＃13;

＆＃13;

＆＃13;

Answer 4

一种方法是使用jQuery实现这一点：

inputs = $("input[name='options']");
inputs.each(function(){
  $(this).on('click', function(){
    value = $(this).attr('value');
    if ($(this).is(':checked')){
       $('#slct-' + value).addClass('active');
    } else {
       $('#slct-' + value).removeClass('active');
    }
  });
});

工作Codepen。

Answer 5

试试这段代码：

$('.option-checkbox #option1').click(function e()
{
    $('.slct-feedback #slct-feedback').addClass('active');
});