关于使用RadioButton和CheckBox控件(Asp.net)生成html包含<label>控件的一点认识

     Asp.net中的RadioButton和CheckBox控件在生成html代码时都会相应的生产两个html控件, RadioButton会生成radio+label, 而CheckBox会生成checkbox+label,它们相应的显示文字都会显示到label控件里,并通过for属性关联控件

     如果要通过js找到RadioButton和CheckBox控件显示的文字(text属性)可以使用下面的方法：

       

function getLabelForText(radioId) //radioId  控件ID
{
    var radioLabels = document.getElementsByTagName("label");  //所有label控件
    var radioText;
    for (var j = 0; j < radioLabels.length; j++)
    {
        if (radioId == radioLabels[j].getAttribute("for"))  //找到label控件关联的radio或checkbox控件
        {
            radioText = radioLabels[j].innerText;
            break;
        }
    }
    return radioText;   //返回text属性值
}

 实现一组radio控件选择某一项时高亮显示

 

         

   function HighlightRadioChecked(obj)
        {
            var a = document.getElementsByName(obj.name); 
            for (var i = 0; i < a.length; i++)
            {
                document.getElementById(a[i].id).style.background = "white";
            }
            document.getElementById(obj.id).style.background = "red";       }

调用，通过onclick事件

onclick="HighlightRadioChecked(this)"

 

CheckBox选择项高亮显示，调用同上

 function HighlightCheckBoxChecked(obj)

        {

            var a = document.getElementById(obj.id);

            if (a.checked)

            {

                a.style.background = "red";

            }

            else

            {

                a.style.background = "white";

            }

        }

 

页面加载时根据数据库值高亮显示

    private void loadToHighlight(string id) //高亮显示选择的控件id

    {

        string jsStr = @"<Script language='JavaScript'>HighlightCs('" + id + "');</Script>";

        ClientScript.RegisterStartupScript(Page.GetType(), "js" + id, jsStr);

}

 

Js:

 function HighlightCs(obj)

        {

            document.getElementById(obj).style.background = "red";

        }

 

 

 设置文本而不是radio或checkbox的背景色（通过innerHTML属性设置）

function HighLightLabelColor(radioId) //radioId  控件ID
{
    var radioLabels = document.getElementsByTagName("label");  //所有label控件
    var radioText;
    for (var j = 0; j < radioLabels.length; j++)
    {
        if (radioId == radioLabels[j].getAttribute("for"))  //找到label控件关联的radio或checkbox控件
        {
            radioLabels[j].innerHTML = "<font color='red' >" + radioLabels[j].innerText + "</font>"; ;
            break;
        }
    }
}