Question

我希望这个标题说出我想做的事情。我的网站上有一个复选框。我想检查变量，然后将class='checked'添加到上面的元素。例如：

<div class="checker" id="uniform-personalData1"><span><input name="personalData1" id="personalData1" value="0" type="checkbox"></span></div>

如果js变量类似于$a = 1，我想将class='checked'添加到<span>。像这样：

<div class="checker" id="uniform-personalData1"><span class="checked"><input name="personalData1" id="personalData1" value="0" type="checkbox"></span></div>

如何使用jquery做这件事？

亲切的问候

Answer 1

我认为您正在寻找类似的内容，向change添加checkbox inputs事件并获取值，如果值= 1，则添加您想要的类：

＆＃13;

$(":checkbox").change(function(){
    if($(this).val() == 1){
        $(this).closest("span").addClass("checked")
    }
    else $("span").removeClass("checked")
});

＆＃13;

.checked{
    color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checker" id="uniform-personalData1">
    <span>
      Value 0 : <input name="personalData1" id="personalData1" value="0" type="checkbox">
    </span><br>
    <span>
      Value 1 : <input name="personalData1" id="personalData1" value="1" type="checkbox">
    </span>
</div>

＆＃13;

Answer 2

如果您使用的是JQuery，则必须在将变量设置为1时将复选框类更新为活动，如果它变为0，则将其删除。

无论您在何处更改变量值，都可以执行以下操作：

if ($a == 1) {
    $("#personalData1").addClass("checked");
} else {
    $("#personalData1").removeClass("checked");
}

如果您也想勾选复选框，可以使用

$("#personalData1").prop("checked")

我建议你使用像Angular，React或Vue这样的反应式框架。使用此框架，您可以使用该类直接在HTML模板中检查条件（例如变量等于1）。

一个有角度的例子：

<input name="personalData1" id="personalData1" value="0" type="checkbox" [ngClass]="{'checked': $a == 1}"/>

希望这会对你有所帮助。问候。

Answer 3

嗨@adam很简单。只需使用jQuery的addClass方法。如下。

    var $a = 1;
    if ($a === 1) {
      $('#uniform-personalData1 > span').addClass('checked');
      console.log($('#uniform-personalData1 span'));
    }

Answer 4

尝试使用下面的Jquery脚本检查复选框是否已选中。

＆＃13;

expect(userNameField.getAttribute('value')).toContain('myusername');

＆＃13;

$(document).ready(function(){
  $('#personalData1').change(function(){
   if($("#personalData1").prop('checked') == true){
      $(this).parents('#uniform-personalData1').addClass('checked');
      console.log('checked');
    } else {
      $(this).parents('#uniform-personalData1').removeClass('checked');
      console.log('Unchecked');
    }
  })
})

＆＃13;

如何将html类添加到上面的元素

4 个答案: