Question

I am new to JavaScript and need some help/idea.

I have an HTML anchor tag and I would like to change/append its attributes based on the selection of checkboxes.

Anchor tag without any checkboxes selected:

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

anchor tag with one checkbox selected:

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

likewise, if the user selects further checkboxes attributes to get appended into the anchor tag.

Where I am now:
Currently, I am able to change anchor tag class with the following JQuery code. But unable to change/append attributes.

<!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>

Answer 1

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>

Answer 2

尝试一下：

$('.changeme').attr('data-cb-addons_id_0', 'CheckBox1');

要删除属性：

$('.changeme').removeAttr('data-cb-addons_id_0');

与现有代码一起执行：

if($(this).is(":checked")) {
    $('.changeme').addClass('red').attr('data-cb-addons_id_0', 'CheckBox1');
} else {
    $('.changeme').removeClass('red').removeAttr('data-cb-addons_id_0');
}

来源：http://api.jquery.com/attr/和https://api.jquery.com/removeAttr/

在Pete发表评论后进行

编辑。

更改/附加html <a> tag attributes using javascript based on checkboxes

2 个答案: