<a>根据复选框使用JavaScript</a>更改/附加html <a>标签属性</a>
[英]Change/Append html <a> tag attributes using javascript based on checkboxes
问题描述
I am new to JavaScript and need some help/idea. 
我是JavaScript新手，需要一些帮助/想法。
I have an HTML anchor tag and I would like to change/append its attributes based on the selection of checkboxes. 我有一个HTML锚标记，我想根据复选框的选择更改/附加其属性。
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. 目前，我可以使用以下JQuery代码更改锚标记类。 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>
2 个解决方案
解决方案1
1 已采纳 2018-11-27 13:14:53
attr() and removeAttr() are the methods used to add and remove attributes. attr（）和removeAttr（）是用于添加和删除属性的方法。
https://api.jquery.com/removeAttr/#removeAttr-attributeName https://api.jquery.com/removeAttr/#removeAttr-attributeName
https://api.jquery.com/attr/#attr2 https://api.jquery.com/attr/#attr2
So you should edit your code to: 因此，您应该将代码编辑为：
<!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>
解决方案2
0 2018-11-27 13:08:27
Try this: 尝试这个：
$('.changeme').attr('data-cb-addons_id_0', 'CheckBox1');
To remove attribute: 删除属性：
$('.changeme').removeAttr('data-cb-addons_id_0');
To do it along with your existing code: 要与您现有的代码一起执行此操作：
if($(this).is(":checked")) {
$('.changeme').addClass('red').attr('data-cb-addons_id_0', 'CheckBox1');
} else {
$('.changeme').removeClass('red').removeAttr('data-cb-addons_id_0');
}
Source: http://api.jquery.com/attr/ and https://api.jquery.com/removeAttr/ 来源： http : //api.jquery.com/attr/和https://api.jquery.com/removeAttr/
Edited after Pete's comment. 在Pete评论后编辑 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.