Question

是否可以在HTML标记中插入属性，然后引用它？

例如，添加属性组：

first <input type="radio" id="qwerty1" group="1" onClick="myclick();"><br>
second <input type="radio" id="qwerty2" group="2" onClick="myclick();"><br>
third <input type="radio" id="qwerty3" group="3" onClick="myclick();"><br>

<script>
function myclick() {
  alert(this.group);
}
</script>

Answer 1

最好使用W3C标准属性数据 - * Read More on data- attribute

＆＃13;

function myclick(control)
{
alert($(control).attr("data-group"));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
first <input type="radio" id="qwerty1" data-group="1" onClick="myclick(this);"><br>
second <input type="radio" id="qwerty2" data-group="2" onClick="myclick(this);"><br>
third <input type="radio" id="qwerty3" data-group="3" onClick="myclick(this);"><br>

＆＃13;

使用jQuery的data（）函数进行更新

＆＃13;

function myclick(control)
{
alert($(control).data("group"));
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
first <input type="radio" id="qwerty1" data-group="1" onClick="myclick(this);"><br>
second <input type="radio" id="qwerty2" data-group="2" onClick="myclick(this);"><br>
third <input type="radio" id="qwerty3" data-group="3" onClick="myclick(this);"><br>

＆＃13;

Answer 2

对Plain JS使用 getAttribute() 方法。

function myclick(input) {
  alert(input.getAttribute("group"));
}

此外，您需要通过函数调用传递当前对象。

first <input type="radio" id="qwerty1" group="1" onClick="myclick(this);"><br>
second <input type="radio" id="qwerty2" group="2" onClick="myclick(this);"><br>
third <input type="radio" id="qwerty3" group="3" onClick="myclick(this);"><br>

<强> Fiddle

如果你已经使用jQuery，

使用 .attr()

Answer 3

如果要使用用户定义的属性，可以使用数据属性。类似的东西：

<input type="radio" id="qwerty3" data-group="3" onClick="myclick(this);">

然后，要调用此值，可以使用.data（）函数访问它，如下所示。

$(function(){
  function myclick(el)
  {
    alert($(el).data('group'));
  }
});

Answer 4

最好将data-*属性用作W3C标准。

<input type="radio" id="qwerty1" data-group="1" onClick="myclick(this);"><br>

然后您可以通过以下方式访问它：

$("#qwerty1").attr("data-group");

并按以下方式设置：

$("#qwerty1").attr("data-group", "1");

Answer 5

您可以使用jquery单击功能获取属性值

，而不是每个单选按钮单击功能

  <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
     $("input[name='radio1']").click(function(){  
        var value = $(this).attr("data-group");
        alert(value);
    });
    });
    </script>
    <style>
    .ra_label
    {
    cursor:pointer;
    }
    </style>
    </head>
    <body>
    <label for="qwerty1" class="ra_label">first <input type="radio" id="qwerty1" name="radio1" data-group="1" ></label><br>
    <label for="qwerty2" class="ra_label">second  <input type="radio" id="qwerty2" name="radio1" data-group="2" ></label><br>
    <label for="qwerty3" class="ra_label">third  <input type="radio" id="qwerty3" name="radio1" data-group="3" ></label><br>
    </body>
    </html>

Answer 6

您可以修改单击的处理程序以传递当前的dom元素对象，并使用它来获取与之关联的属性值：

 <input type="radio" id="qwerty1" group="1" onClick="myclick(this);"><br>

JS：

function myclick(obj){
  alert($(obj).attr("group"));
}

Answer 7

是的，可以在HTML标签中使用我们自己的属性。但为安全起见，请在属性名称前使用“data-”前缀，以避免旧浏览器出现任何问题。

first <input type="radio" id="qwerty1" data-group="1" onClick="myclick();">

Answer 8

试试这个（完整的Javascript方法）： -

first <input type="radio" id="qwerty1" group="1" onClick="myclick(this);"><br>
second <input type="radio" id="qwerty2" group="2" onClick="myclick(this);"><br>
third <input type="radio" id="qwerty3" group="3" onClick="myclick(this);"><br>

<script>
function myclick(elem) {
  alert(elem.getAttribute('group'));
}
</script>

Fiddle

旁注：而不是使用group属性，而是使用HTML5 data-*属性作为data-group="1"。

Answer 9

是的，你可以得到这样的价值： -

first <input type="radio" id="qwerty1" group="1" onClick="myclick(this);"><br>
second <input type="radio" id="qwerty2" group="2" onClick="myclick(this);"><br>
third <input type="radio" id="qwerty3" group="3" onClick="myclick(this);"><br>

<script>
function myclick(elem) {

 var value_gp =  $(elem).attr("group");

alert(value_gp);

}
</script>

是否可以在HTML标记中插入属性？

9 个答案: