How to implement microdata attributes -- data-* and getting rid of the ID attribute?
<p>I am using jQuery 1.4.3.  </p>

<p>I am trying to determine a best practice for using data-* attributes.  In the recent past, I have created checkboxes like this:</p>

<pre><code>&lt;input type='checkbox' id='123' class='Product' comp='1' man='1'&gt;
&lt;input type='checkbox' id='456' class='Product' comp='1' man='2'&gt;
&lt;input type='checkbox' id='789' class='Product' comp='2' man='3'&gt;
</code></pre>

<p>The HTML 5 spec says that I shouldn't use custom attributes and that I should use data-* attributes.  Which means that the above checkboxes should really be like this:</p>

<pre><code>&lt;input type='checkbox' id='123' class='Product' data-comp='1' data-man='1'&gt;
&lt;input type='checkbox' id='456' class='Product' data-comp='1' data-man='2'&gt;
&lt;input type='checkbox' id='789' class='Product' data-comp='2' data-man='3'&gt;
</code></pre>

<p>That's easy enough to accomplish, but with jQuery, I would usually call these elements by their id, which in this case happens to be the actual product id. So, my code to access these would be like this:</p>

<pre><code>$(".Product").click(function() {
    var ProductID = $(this).attr("id");
    alert(ProductID );
});
</code></pre>

<p>Since the ID is really just a piece of data that I need to access, it should be a data-* attribute instead of an id.  I think what I really should be doing is this:</p>

<pre><code>&lt;input type='checkbox' class='Product' data-prodid='123' data-comp='1' data-man='1'&gt;
&lt;input type='checkbox' class='Product' data-prodid='456' data-comp='1' data-man='2'&gt;
&lt;input type='checkbox' class='Product' data-prodid='789' data-comp='2' data-man='3'&gt;
</code></pre>

<p>This means that the id is no longer necessary for storing data, because I can do this:</p>

<pre><code>$(".Product").click(function() {
    var ProductID = $(this).attr("data-prodid");
    alert(ProductID );
});
</code></pre>

<p>And if I want to check or uncheck a specific GROUP of boxes, I can do something like this:</p>

<pre><code>// WHEN A PRODUCT IS CLICKED 
$(".Product").click(function() {
    // GET THE COMP
    var Comp = $(this).attr("data-comp");
    // UNCHECK BOXES WITH A DISSIMILAR COMP THAN THE ONE CLICKED
    $("[data-comp]!="+Comp).attr("checked", false);
});
</code></pre>

<p>It really seems like I can accomplish everything I need without using the id for storing data. Am I wrong? Is this how I should implement microdata storage? Is it correct that I will no longer need the id attribute except for CSS layout? Am I missing anything?</p>
