1

我有一个简单的 html 页面来测试自定义 'data' 属性，该属性用于 HTML 复选框来保存 'id' 数据。但是，在针对选定复选框检索那些“id”的值时，我在这些 data-id 属性中丢失了前导零。例如，一个特定的复选框定义为：

<input type="checkbox" data-id="00372" >

当我检索其“id”的值时，返回的值为 372 而不是 00372。请帮助。

我的 HTML 页面的代码详细信息：

<html>
<head>
    <script type="text/javascript" src="jquery-1.6.2.js"></script>
    <script type="text/javascript">

            function buttonCollectId_Click()
            {               
                $('input[type=checkbox]:checked').each(function(index,value){
                        console.log('Selected:' + $(this).data('id'));
                });
            }

    </script>
</head>
<body>
    <table>
    <tr>
       <td>Employee Id:</td><td>02813</td><td><input type="checkbox" data-id="02813" ></td>
    </tr>
    <tr>
       <td>Employee Id:</td><td>46522</td><td><input type="checkbox" data-id="46522" ></td>
    </tr>
    <tr>
       <td>Employee Id:</td><td>00372</td><td><input type="checkbox" data-id="00372" ></td>
    </tr>
    <tr>
        <td colspan="3"><input id="buttonCollectId" type="button" value="Collect Ids" onclick="buttonCollectId_Click();"></td>
    </tr>
    </table>

</body>
</html>
4

2 回答 2

4

使用 .attr('data-id')：

    function buttonCollectId_Click()
    {               
        $('input[type=checkbox]:checked').each(function(index,value){
                console.log('Selected:' + $(this).attr('data-id'));
        });
    }

codepen

于 2013-04-26T19:30:41.423 回答
1

正如尼克建议的那样，.attr()如果您想要相关数据属性的字符串表示，则应该使用该方法。

作为 jQuery 文档状态（http://api.jquery.com/data/#data-key）：

"Every attempt is made to convert the string to a JavaScript value 
(this includes booleans, numbers, objects, arrays, and null) otherwise
it is left as a string. To retrieve the value's attribute as a string
without any attempt to convert it, use the attr() method."

该.data()方法旨在存储与 html 元素关联的（或多或少）任意数据的序列化。它旨在符合 HTML5 数据属性规范，可在http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data找到- *-属性

于 2013-04-26T19:33:49.060 回答