Javascript attributes slowing down dynamic table

I have a table that is dynamically created in some c# code-behind when a dropdown is changed. There 9 columns in this table. The first 8 should be in one group. The last attribute in another. When the last attribute is selected I want the first 8 to go unchecked. When any of the first 8 are checked I wanted the last attribute to go unchecked. I added some javascript and it works but it causes the tables to load extremely slow. If there is a simpler way please let me know. Thanks!

adding javascript function calls through c#

attr1.Attributes.Add("onClick", "uncheckOK(" + rowCount + ");");

attr2.Attributes.Add("onClick", "uncheckOK(" + rowCount + ");");

attr3.Attributes.Add("onClick", "uncheckOK(" + rowCount + ");");

attr4.Attributes.Add("onClick", "uncheckOK(" + rowCount + 开发者_如何学Python");");

attr5.Attributes.Add("onClick", "uncheckOK(" + rowCount + ");");

attr6.Attributes.Add("onClick", "uncheckOK(" + rowCount + ");");

attr7.Attributes.Add("onClick", "uncheckOK(" + rowCount + ");");

attr8.Attributes.Add("onClick", "uncheckOK(" + rowCount + ");");

attr9.Attributes.Add("onClick", "uncheckAttr(" + rowCount + ");");

functions to uncheck

function uncheckAttr(row) {
    var chk1 = document.getElementById("MainContent_attr1-" + row);
    chk1.checked = false;
    var chk2 = document.getElementById("MainContent_attr2-" + row);
    chk2.checked = false;
    var chk3 = document.getElementById("MainContent_attr3-" + row);
    chk3.checked = false;
    var chk4 = document.getElementById("MainContent_attr4-" + row);
    chk4.checked = false;
    var chk5 = document.getElementById("MainContent_attr5-" + row);
    chk5.checked = false;
    var chk6 = document.getElementById("MainContent_attr6-" + row);
    chk6.checked = false;
    var chk7 = document.getElementById("MainContent_attr7-" + row);
    chk7.checked = false;
    var chk8 = document.getElementById("MainContent_attr8-" + row);
    chk8.checked = false;
}
function uncheckOK(row) {
    var chk9 = document.getElementById("MainContent_attr9-" + row);
    chk9.checked = false;
}

Can't you just do this via standard HTML? Make a set of radio buttons - give columns 1-8 the same name attribute, and give the 9th one a different name. You should only be able to select one or the other.

Alternatively, strip out that ugly code and use some jQuery. Something like:

$('table.your-table input[type=radio]').click(function(){
    $('table.your-table input[type=radio]').not(this).removeAttr('checked');
});

EDIT: Actually the HTML option won't work, but I encourage you to do this via jQuery, it's what it's built for.

function uncheck() {
    var clickSource = event.srcElement;
    if (clickSource != null) {
        var fullid = clickSource.name;
        if (fullid != null) {
            if (fullid.indexOf('attr') != -1) {
                var checkboxid = fullid.substring(fullid.indexOf('attr'));
                var row = checkboxid.substring(checkboxid.indexOf('-') + 1);
                var attr = checkboxid.substring(checkboxid.indexOf('-') - 1, checkboxid.indexOf('-'));
                if (attr == '9') {
                    uncheckAttr(row);
                }
                else {
                    uncheckOK(row);
                }
            }
        }
    }
}