1

假设我在页面上有一些服务器端 HTML 元素，如下所示：

<div id="cblDomain" runat="server">
    <input runat="server" id="cblDomain_com" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain" checked="checked"><label for="cblDomain_com">com - 10</label><br>
    <input runat="server" id="cblDomain_net" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_net">net - 10</label><br>
    <input runat="server" id="cblDomain_info" value="5" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_info">info - 5</label><br>
    <input runat="server" id="cblDomain_me" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_me">me - 10</label>
</div>

<select runat="server" name="ddlDomainPeriod" onchange="subsumDomain()" id="ddlDomainPeriod">
    <option value="1">1 yr</option>
    <option value="2">2 yrs</option>
    <option value="3">3 yrs</option>
    <option value="4">4 yrs</option>
    <option value="5">5 yrs</option>
</select>
<div name="sum" id="sumDomain">10</div>

我想用 Domains & Year 进行计算，并在 SUM (div) 中显示结果。

JavaScript 工作正常，因为它没有runat="server"属性，但不是它不工作。

这是我在添加runats 之前使用的（工作）JavaScript：

    <script type="text/javascript">
        function subsumDomain() {
            var _sum = 0;
            var _cblDomain = document.getElementsByName('cblDomain');
            for (i = 0; i < _cblDomain.length; i++) {
                if (_cblDomain[i].checked == true)
                    _sum += Number(_cblDomain[i].value);
            }
            var _domainPeriod = Number(document.getElementById('ddlDomainPeriod').options[document.getElementById('ddlDomainPeriod').selectedIndex].value);
            document.getElementById('sumDomain').innerHTML = moneyConvert(_sum * _domainPeriod);
        }
</script>

现在代码对我来说有点复杂，我不知道如何修复它并获得正确的答案。

任何帮助将不胜感激。

4

2 回答 2

1

这里有很多问题：

在您的下方inputs并且br没有结束标签。

<input runat="server" id="cblDomain_com" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain" checked="checked"><label for="cblDomain_com">com - 10</label><br>

我无法让下面的代码与服务器控件一起使用，数组为空。

var _cblDomain = document.getElementsByName('cblDomain');
var _cblDomain = $(".cblDomain :input"); <-- USE THIS INSTEAD (jQuery) *

还

document.getElementById('ddlDomainPeriod')
document.getElementById('<%= ddlDomainPeriod.ClientID %>') <-- USE THIS INSTEAD *

完整的工作代码如下：

标记

<div class="cblDomain" id="cblDomain" runat="server">
  <input runat="server" id="cblDomain_com" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain" checked="checked" /><label for="cblDomain_com">com - 10</label><br>
  <input runat="server" id="cblDomain_net" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_net" />net - 10</label><br>
  <input runat="server" id="cblDomain_info" value="5" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_info" />info - 5</label><br>
  <input runat="server" id="cblDomain_me" value="10" onchange="subsumDomain()" type="checkbox" name="cblDomain"><label for="cblDomain_me" />me - 10</label>
</div>
  <select runat="server" name="ddlDomainPeriod" onchange="subsumDomain()" id="ddlDomainPeriod">
    <option value="1">1 yr</option>
    <option value="2">2 yrs</option>
    <option value="3">3 yrs</option>
    <option value="4">4 yrs</option>
    <option value="5">5 yrs</option>
  </select>
<div name="sum" id="sumDomain">10</div>

Javascript，也使用 jQuery。

function subsumDomain() {
  var _sum = 0;
  var _cblDomain = document.getElementsByName('cblDomain');
  var _cblDomain = $(".cblDomain :input");
  for (i = 0; i < _cblDomain.length; i++) {
    if (_cblDomain[i].checked == true)
      _sum += Number(_cblDomain[i].value);
  }
  var _domainPeriod = Number(document.getElementById('<%= ddlDomainPeriod.ClientID %>').options[document.getElementById('<%= ddlDomainPeriod.ClientID %>').selectedIndex].value);
  document.getElementById('sumDomain').innerHTML = _sum * _domainPeriod;
}
于 2013-03-07T11:53:54.010 回答
0

如果在添加 runat="server" 之前它正在工作，那么问题可能是由于 ASP.NET 更改了控件的 ID。

如果您使用的是 ASP.NET 4，您可以使用 ClientIDMode 属性来阻止 ID 被更改 ( http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx ) ：

例如 div 将是

<div id="cblDomain" runat="server" ClientIDMode="Static">

下拉菜单是

<select runat="server" name="ddlDomainPeriod" onchange="subsumDomain()" id="ddlDomainPeriod" CliendIDMode="Static">

您还需要更改 javascript 以通过 ID 而不是名称获取 div 元素：

var _cblDomain = document.getElementById('cblDomain');

如果您使用的是 ASP.NET 2，那么您将需要获取控件的 ClientID。如果 javascript 是 .aspx 页面的一部分，那么您可以这样做：

var _cblDomain = document.getElementById('<%= cblDomain.ClientID %>');
于 2013-03-07T11:56:42.510 回答