How to use Custom Attribute in HTML Element

In some scenario we may require to bind multiple values to HTML control to check some condition. Then we have our own customer attribute to HTML control and bind the value.

Please refer below step (Taking Radio button as an example)

Step 1: Assign any name (it should not be predefined name of the control attributes)

<input type="radio" id="RdoBtnEmploye1" checked='<%# Eval("IsChecked") %>' age='<%# Eval("Age") %>' 
 isnewjoine='<%# Eval("IsNewJoine") %>' onclick="javascript:Check();" />

Here, I have added two custom attribute (age and isnewjoine) to the radio button control

Step 2: Now onclick I am calling the Check() Javascript method

Step 3: In that method I can read the custom attribute value like

<script type="text/javascript" language="javascript">

    function Check() {
        var age = $("#RdoBtnEmploye1").attr("age");
        var isnewjoine = $("#RdoBtnEmploye1").attr("isnewjoine");
    }
</script>