如何在變量中獲取ClientID

Question

我在頁面上有7個復選框，共7周，另外還有7天的時間選擇器。 選中復選框后，我要顯示該工作日的時間選擇器，如果未選中，則要隱藏相應的時間選擇器

我已經使用下面的代碼來做到這一點，它也正在工作。

function Chk_WeekDay_Clicked(ctrl, week) {
    if (ctrl.checked) {
        if (week == "Monday")
            document.getElementById("<%= Tm_Monday_From.ClientID %>").style.display = "";
        else if (week == "Tuesday")
            document.getElementById("<%= Tm_Tuesday_From.ClientID %>").style.display = "";
        else if (week == "Wednesday")
            document.getElementById("<%= Tm_Wednesday_From.ClientID %>").style.display = "";
       //Rest of the days 
    }
    else{
        if (week == "Monday")
            document.getElementById("<%= Tm_Monday_From.ClientID %>").style.display = "none";
        else if (week == "Tuesday")
            document.getElementById("<%= Tm_Tuesday_From.ClientID %>").style.display = "none";
        else if (week == "Wednesday")
            document.getElementById("<%= Tm_Wednesday_From.ClientID %>").style.display = "none";
        //Rest of the days 
    }
}

Chk_WeekDay_Clicked是“所有工作日”的事件處理程序復選框。 第一個參數是Clicked CheckBox控件，第二個參數是星期幾的名稱。

所有時間選擇器控件的名稱均具有與Tm_ [WeekName] _From相同的命名方式

所以，我的問題是不要使用很多if-else，我可以分兩行嗎？ 類似於下面的代碼。

function Chk_WeekDay_Clicked(ctrl, week) {
    //I want this controlId by using parameter. And I must get it by ClientID as I am using it on page having MasterPage.
    var controlId = "Tm_" + week + "_From";
    if (ctrl.checked) {
        document.getElementById(controlId).style.display = "";
    }
    else {
        document.getElementById(controlId).style.display = "none";
        }
}

我的實際問題是如何在變量中獲取Control的ClientId。 作為使用母版頁的頁面，我必須使用ClientID來獲取控件ID。

所以，有人可以為此建議解決方案嗎

Answer 1

ClientID由ASP.NET生成，無法使用JavaScript變量創建。 但是你可以做這樣的事情

function Chk_WeekDay_Clicked(ctrl, week) {

    //Since Client ID is generated by ASP.NET
    //Create a list of ids
    var controls  = {
        "monday" : "<%= Tm_Monday_From.ClientID %>",
        "tuesday" : "<%= Tm_Tuesday_From.ClientID %>",
        "wednesday" : "<%= Tm_Wednesday_From.ClientID %>",
    }

    //Fetch Control ID
    var controlId = controls[week.toLowerCase()];

    //Desired operation
    if (ctrl.checked) {
        document.getElementById(controlId).style.display = "";
    }
    else{
        document.getElementById(controlId).style.display = "none";
    }
}

Answer 2

如果passing control本身passing control給函數，則可以directly訪問該control properties 。

function Chk_WeekDay_Clicked(ctrl, week) {
    if (ctrl.checked) 
        ctrl.style.display = "";
    else 
        ctrl.style.display = "none";
}