javascript - 使用基于复选框的 javascript 更改/附加 html <a> 标签属性

标签 javascript jquery html

我是 JavaScript 新手,需要一些帮助/想法。

我有一个 HTML anchor 标记,我想根据复选框的选择更改/附加其属性。

未选中任何复选框的 anchor 标记:

<a href="javascript:void(0)" data-cb-type="checkout" data-cb-plan-id=“SamplePlan” >Enrol</a>

选中一个复选框的 anchor 标记:

<a href="javascript:void(0)" data-cb-type="checkout" data-cb-plan-id="SamplePlan" data-cb-addons_id_0=“CheckBox1”>Enrol</a>

同样,如果用户选择其他复选框属性以附加到 anchor 标记中。

我现在在哪里:
目前,我可以使用以下 JQuery 代码更改 anchor 标记类。但无法更改/附加属性。

<!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');
    } else {
        $('.changeme').removeClass('red');
    }
});
    </script>
  </body>
</html>

最佳答案

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>

关于javascript - 使用基于复选框的 javascript 更改/附加 html <a> 标签属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53500389/

相关文章:

javascript - 寻找多级继承中的构造函数

jquery - 显示一个 <div> 并隐藏另一个

javascript - 更改日期格式javascript

javascript - 从下拉列表生成 .txt 文件

javascript - JS onclick div 消失,直到播放动画

javascript - 光滑的 slider 图像在加载时未正确居中

javascript - 如何从开发者工具中清除 IE10 & IE11 中的 localStorage?

javascript - 避免循环 iframe

javascript - 使用 fullCalendar 控件获取所选时段的日期

html - 图像不会出现在 slider 旁边