在html借助元素特性存储信息

背景:比如存在学生选择的CheckBox,希望在CheckBox中同时存储学生的姓名及其所在的城市,比如选择Lily所对应的CheckBox以后,可以获得Lily所在的城市“NewYork”。

html代码如下:

<input type="checkbox" id=@s.ID class="stuCheck" value=@s.Name itemid=@s.City onclick="whenStuChecked($(this))"/>

如上代码,s是一个Stu对象,由ID、Name、City和Age四个字段组成,在html代码中,由value来存储学生的姓名,itemid来存储学生所在的城市。

JS代码如下:

    function updateCheckedStus() {
        checkedStus = "";
        $("#tableStu").find("input.stuCheck").each(function () {
            if ($(this).attr("checked") == "checked") {
                checkedStus += $(this).attr("itemid") + " ";
            }
        });
        $("#checkedStu").text(checkedStus);
    }

如上代码,判断table中的每一个checkbox元素,如果被选中,更新checkedStus变量,显示在$("#checkedStu")元素中。

总结:itemid和其他html属性的赋值和取值的用法一致,在这里单独拿出来讲,是因为可以将该功能集成到如何根据集合动态构建复选框选择控件中。

注意:实际上,可以自定义特性来存储元素信息,特性名称自拟,如下代码:

1     <button id="btn1" _mystyle="zidingyi">点击</button>

_mystyle是自定义的特性,不属于button元素,任然可以获取到btn1的_mystyle特性值,代码如下:

1             alert($("#btn1").attr('_mystyle'));

但是编译器会报告一个警告,如图:

原文地址:https://www.cnblogs.com/SharpL/p/4684491.html