Question

我已经检查了所有堆栈溢出，但它们并不完全是我需要的。我有带关联标签的复选框

<p>
  <input type="checkbox" name="animals" value="dog" id="dg" />
  <label for="dg">Dog</label>
</p>
<p>
  <input type="checkbox" name="animals" value="cat" id="ct" />
  <label for="ct">Cats</label></p>
<p>

<p><input type="button" id='bt' value="Record" /></p>

还有一个按钮，单击该按钮时，如果选中该复选框，则与其关联的标签会在标签中添加一个突出显示类。我已经编写了突出显示类，我只是在使用addClass方法应用它时遇到了麻烦。

我有：

         $(':checkbox:checked').addClass('highlight');

但它什么都不做

Answer 1

让我们说这是你的HTML：

<p>
  <input type="checkbox" name="animals" value="dog" id="dg" />
  <label for="dg">Dog</label>
</p>
<p>
  <input type="checkbox" name="animals" value="cat" id="ct" />
  <label for="ct">Cats</label></p>
<p>
<p>
  <button id="btnSubmit">Click Me!</button>
</p>

这是你的CSS课程：

.highlight {
  background-color: yellow;
}

您可以做的一件事是遍历每个选中的复选框，然后使用label[for=*]属性应用该类：

$('#btnSubmit').click(function() {
    $('input:checked').each(function () {
        $("label[for='" + $(this).attr('id') + "']").addClass("highlight");
    });
});

但是，使用上述方法，如果您取消选中一个框并再次点击提交，则不允许删除突出显示类。我更喜欢以下方法...它循环遍历所有复选框，并测试它们以确定它们是否被检查过：

$('#btnSubmit').click(function() {
    $('input[type=checkbox]').each(function () {
        if (this.checked) {
            $("label[for='" + $(this).attr('id') + "']").addClass("highlight");
        } else {
            $("label[for='" + $(this).attr('id') + "']").removeClass("highlight");
        }
    });
});

试试这个Fiddle

我试图找到一种方法来在一行代码中引用所有已选中复选框的标签。因为如果你能做到这一点，你可以放弃循环和if语句。我会继续研究，如果找到了，我会相应地编辑我的帖子。

Answer 2

更新：好的，我想我明白你需要什么。查看更新的示例。

诀窍是知道如何找到与按钮相关的标签和复选框。由于按钮未包含在问题代码中，我不得不猜测。如果该按钮位于其他位置，您可以使用these jQuery traversing methods.

进行试验

$(document).ready(function(){
  
$('#mybutt').click(function(){
  var chkboxes = $('input[type=checkbox]');
  $(chkboxes).each(function(){
     if ( $(this).is(':checked') ){
         $(this).parent().find('label').addClass('highlight');
     }else{
         $(this).parent().find('label').removeClass('highlight');
     }
  });
});
  
}); //END document.ready

.highlight{background:red;color:yellow;padding:2px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>
  <input type="checkbox" name="animals" value="dog" id="dg" />
  <label for="dg">Dog</label>
</p>
<p>
  <input type="checkbox" name="animals" value="cat" id="ct" />
  <label for="ct">Cats</label>
<p>
<button id="mybutt">Go</button>

Answer 3

我想，你要做的是更改一个类，在复选框的值发生变化后，最简单的方法就是使用1事件，你也可以用jQuery绑定事件使用2

onChange

$('#your_checkbox').on('change', function(){})

$('[type="checkbox"]').on('change', function() {
  if (!$(this).attr('checked')) {
    $(this).attr('checked', 'checked');
    $(this).parent().addClass('checked');
  } else if ($(this).attr('checked') === 'checked') {
    $(this).removeAttr('checked', '');
    $(this).parent().removeClass('checked');
  }
});

$('#btnSubmit').on('click', function() {
  var inputs = $(this).parent().parent().find('[type="checkbox"]')
  inputs.each(function(){
    if ($(this).attr('checked') === 'checked') {
      $(this).parent().addClass('iam-checked');
    }
    else {
      $(this).parent().removeClass('iam-checked');
    }
  });
});

Answer 4

这有点晚了，但我很惊讶没有人提到next方法。您试图在复选框后设置标签样式，而不是复选框本身。换句话说，标签是复选框的下一个兄弟。

我认为这是解决这个问题的最简单方法，所以想加两分钱。

＆＃13;

$("#bt").on("click", function() {
    $(":checked").each(function() {
        $(this).next().addClass("highlight");
    });
});

＆＃13;

.highlight { background: gold; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <input type="checkbox" name="animals" value="dog" id="dg" />
  <label for="dg">Dog</label>
</p>
<p>
  <input type="checkbox" name="animals" value="cat" id="ct" />
  <label for="ct">Cats</label></p>
<p>

<p><input type="button" id='bt' value="Record" /></p>

＆＃13;

通过按钮

4 个答案: