时间戳

首页 > 解决方案 > 使用基于复选框的 javascript更改/附加 html标记属性

javascript - 使用基于复选框的 javascript更改/附加 html标记属性

问题描述

标签： javascriptjqueryhtml

解决方案

attr() 和 removeAttr() 是用于添加和删除属性的方法。

https://api.jquery.com/removeAttr/#removeAttr-attributeName

https://api.jquery.com/attr/#attr2

因此，您应该将代码编辑为：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style>
      .red {color: red;}
    </style>
  </head>
  <body>
    <input type="checkbox" id="test" value="supress">
    <label for="dna_headline_optin_supress">Check me out</label>

    <div>
      <p class="changeme">Look at me change color</p>
      <p>Look at me change color - NOT</p>
      <p class="changeme">Look at me change color</p>
    </div>
    <script type="text/javascript">
      $('#test').change(function(){
    if($(this).is(":checked")) {
        $('.changeme')
          .addClass('red')
          .attr('rel', '2345');
    } else {
        $('.changeme')
          .removeClass('red')
          .removeAttr('rel');
    }
});
    </script>
  </body>
</html>

推荐阅读