如何在客户端获得服务器端html复选框的值
How to get value of server-side html checkboxes in client-side?
假设页面上有一些服务器端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 &在SUM (div)中计算年份并显示结果。
JavaScript工作正常,因为它没有runat="server"
属性,但不是它不工作。
这是我在添加runat
之前使用的(工作)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>
现在代码对我来说有点复杂,我不知道如何修复它并得到正确的答案。
这里有很多问题:
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;
}
如果在添加runat="server"之前它是工作的,那么问题可能是由于ASP。. NET更改控件的id。
如果您正在使用ASP。. NET 4可以使用ClientIDMode属性来阻止ID被更改(http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx):
)E。如果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。那么你需要得到控件的clientid。如果javascript是.aspx页面的一部分,那么你可以这样做:
var _cblDomain = document.getElementById('<%= cblDomain.ClientID %>');
相关文章:
- 在放入表单数据之前,将HTML复选框设置为字符串
- 访问代码隐藏中动态创建的 html 复选框
- HTML 复选框返回值
- HTML 复选框 Click() 使用 jQuery 返回 FALSE 或 TRUE,而不是 READONLY 或 DI
- 如何通过JavaScript动态选中/取消选中html复选框
- 将 HTML 复选框值放入文本字段
- 如何在javascript中调用函数,当选中HTML复选框而不单击或更改时
- 无法在 JavaScript 中获取 HTML 复选框值
- HTML 复选框和 meteorJS
- 如何从 HTML 复选框生成 SQL 查询
- 设置 HTML 复选框以使用 javascript 进行检查
- JavaScript 中的循环 html 复选框
- html 复选框值检索时出错
- 取消选中带有标签的 html 复选框
- HTML 复选框动态附加到列表,但 JavaScript 不起作用
- HTML复选框每次为每个组选择一个
- 如何通过JavaScript创建新的HTML复选框
- 使未选中的HTML复选框提交选中的值
- 基于mvc模型设置html复选框复选值
- HTML复选框处理