Question

当用户选中或取消选中单个复选框项时，我想将一些逻辑应用于包含CheckBoxList控件的页面。比如说，动态显示或隐藏相关控件。

我想出了一种使用ASP.Net 2.0回调机制（AJAX）的方法，在代码隐藏中结合了客户端Javascript和服务器端逻辑。然而，这种解决方案不是非常防弹（即很可能遇到时间问题）。它不可移植，因为代码需要知道各个项目的顺序ID等。

我提出的代码分为两个函数，一个处理onclick事件，另一个处理返回的回调字符串：

<script type="text/javascript">

function OnCheckBoxClicked()
{
    // gathers the semi-colon separated list of labels,
    // associated with the currently checked items

    var texts = '';

    // iterate over each individual checkbox item
    // items in a checkboxlist are sequential, so
    // stop iteration at the first missing sequence number

    for (var index = 0; index < 99; index++)
    {
        var checkbox = document.getElementById('ctl00_cphAdmin_cblCategories_' + index);
        if (checkbox == null)
            break;

        if (checkbox.checked)
        {

            // find label associated with the current checkbox item

            var labels = document.getElementsByTagName('label');
            for (var index_ = 0; index_ < labels.length; index_ ++)
            {
                if (labels[index_].htmlFor == checkbox.id)
                {
                    texts = texts + labels[index_].innerHTML + ';';
                    break;
                }
            }
        }
    }

    // perform callback request
    // result will be processed by the UpdateCheckBoxes function

    WebForm_DoCallback('__Page', '_checkbox' + texts, UpdateCheckBoxes, 'checkbox', null, true /* synchronous */);
}
</script>

在此示例中，我的复选框与博客帖子的类别相匹配。

我需要处理生成的回调字符串，其中包含一个以分号分隔的复选框名称列表以检查/取消选中，以确保正确同步相关的父/子类别。该字符串来自服务器上执行的逻辑。

在其他情况下，生成的回调字符串可能是其他内容。

<script type="text/javascript">

function UpdateCheckBoxes(returnmessage, context)
{
    if (returnmessage == null || returnmessage == '')
        return ;

    // iterate over each individual checkbox item
    // items in a checkboxlist are sequential, so
    // stop iteration at the first missing sequence number

    for (var index = 0; index < 99; index++)
    {
        var checkbox = document.getElementById('ctl00_cphAdmin_cblCategories_' + index);
        if (checkbox == null)
            break;

        // find label associated with the current checkbox item

        var label = '';
        var labels = document.getElementsByTagName('label');
        for (var index_ = 0; index_ < labels.length; index_ ++)
        {
            if (labels[index_].htmlFor == checkbox.id)
            {
                label = ';' + labels[index_].innerHTML + ';';
                break;
        }
    }

        // perform custom processing based on the contents
        // of the returned callback string

        // for instance, here we check whether the returnmessage
        // contains the string ';' + label + ';'


        if (returnmessage.indexOf(label, 1) > 0)
        {
            // do something
        }        
    }
}

</script>

这个问题没有更优雅的解决方案吗？

Answer 1

我会做几件事。一，我想出了一种方法来传递需要传递回客户端onclick处理程序的值。根据你填充CheckBoxList的方式，这可能就像为ListItem添加一个“onclick”属性一样简单，该复选框调用你的函数并赋予标签相同的值，比如'OnCheckBoxClicked（this，'Label'）。这将消除导出标签的需要，尽管你可以通过引用复选框的前一个元素很容易地在客户端这样做，如果你只是传递了它的引用（或者父，也许，取决于是否label在输入之前或输入包含在其中。）

二，我也会更改它，以便它只传回当前被点击的项目并一次处理一个。

假设你复选框（渲染时）看起来像：

  <label for="something">CheckBox 1</label>
  <input type='checkbox' id='ctl00_....' value='1' onclick="OnCheckBoxClicked(this,'CheckBox_1');" />

您的功能可能如下所示：

function OnCheckBoxClicked(checkbox,identifier)
{
  // do something based on the checkbox clicked

  WebForm_DoCallback('__Page', identifer, UpdateCheckBoxes, {checkbox: checkbox.id, label: identifier } , null, true /* synchronous */);
}

function UpdateCheckBoxes(result,context)
{
   var checkbox = document.getElementById(context.checkbox);
   var identifier = context.label;

   if (result)  // AJAX method now returns true/false as context holds info on controls
   {
       ... do something...
   }
}

Answer 2

您可以在onclick（）事件的复选框控件中添加事件。并将控件的id作为参数发送，然后更新所需控件的属性

<input type='checkbox' id='ctl00_....' value='1' onclick="OnCheckBoxClicked('ctrl_toUpdateID');" />



<script type="text/javascript">

function OnCheckBoxClicked(ctrlID)
{
  var ctrl = document.getElementById(ctrlID);
  if(ctrl.getAttribute('disabled')
 ctrl.removeAttribute('disabled')
else
    ctrl.setAttribute('disabled','disabled')


}
</script>

反应单击CheckboxList中的List Items

2 个答案: