Question

假设我在页面上有一些服务器端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＆amp;进行计算年份并以SUM（div）显示结果。

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

这是我在添加runat s之前使用的（工作）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>

现在代码对我来说很复杂，我不知道如何解决它并得到正确的答案。

任何帮助都将受到高度赞赏。

Answer 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;
}

Answer 2

如果在添加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 %>');

如何在客户端获取服务器端html复选框的值？

2 个答案: