我有一些checkboxes
如图所示
</tr>
<td style="padding-left: 10px" width="70px">
<asp:CheckBox ID="ChkDytLek" runat="server" class="llogariDyt" GroupName="Monedha" Text="Lek" CssClass="radioMarginLeft" OnClick="ChkValidate()" /> <img src="images/eagle-clipart-albanian-7.jpg" width="24px" height="15px" />
</td>
<td>
<asp:CheckBox ID="ChkDytCAD" runat="server" GroupName="Monedha" Text="CAD" CssClass="radioMarginLeft" class="llogariDyt" OnClick="ChkValidate()" /> <img src="images/CAD.png" width="24px" height="15px" />
</td>
</tr>
<tr>
<td> </td>
<td style="padding-left: 10px">
<asp:CheckBox ID="ChkDytEU" runat="server" GroupName="Monedha" Text="EUR" CssClass="radioMarginLeft" class="llogariDyt" OnClick="ChkValidate()" /> <img src="images/eu.png" width="24px" height="15px" />
</td>
</tr>
但我想限制用户选择不超过2个。我正在使用java脚本函数,但我不能告诉为什么函数被调用但仅在alert(1)
中输入并且没有得到我的复选框的值。
我称他们是错误的方式或什么?
function ChkValidate() {
var NewCount = 0
if (document.getElementsByClassName("chkDytLek").checked = true) {
NewCount = NewCount + 1
}
alert(2);
if (document.getElementById("chkDytUSD").checked = true) {
NewCount = NewCount + 1
}
alert(3);
if (document.getElementById("chkDytEUR").checked = true) {
NewCount = NewCount + 1
}
if (document.getElementById("chkDytCAD").checked = true) {
NewCount = NewCount + 1
}
if (document.getElementById("chkDytCHF").checked = true) {
NewCount = NewCount + 1
}
if (NewCount == 3) {
alert('Pick Just Two Please')
document.forms;
return false;
}
}
答案 0 :(得分:1)
这是因为if条件中的单个'='。
if (document.getElementsByClassName("chkDytLek").checked = true)
应该是:
if (document.getElementById("chkDytLek").checked == true)
答案 1 :(得分:0)
第一件事chkDytLek
不是您的代码中的类这是Id
和单=
用于分配而不是用于比较
替换代码并指定正确的classes
和Id's
document.getElementById("chkDytLek").checked == true
注意 - &gt;
getElementById
将提供单个dom元素,因为Id在Dom中是唯一的
getElementsByClassName
将为您提供一个数组,因此您需要为此类
document.getElementsByClassName("someclass").checked = true
如果您想要具有类名的上述功能,请检查此
答案 2 :(得分:0)
你可以用一个条件而不是多个条件来实现,
function ChkValidate() {
var countClicks = document.querySelectorAll('input[type="checkbox"]:checked').length
if(countClicks > 2){
alert('Pick Just Two Please')
document.forms;
return false;
}
}
答案 3 :(得分:0)
我个人会使用这种代码(更短更优雅):
let checkboxes = document.querySelectorAll(".checkbox")
ChkValidate = () => {
let checkedCount = checkboxes
.filter(checkbox => checkbox.checked) // Keeps only the checked ones
.length
console.log("checkedCount = ", checkedCount)
if (checkedCount > 2) alert("Pick Just Two Please")
}
checkboxes.forEach(cb => cb.addEventListener("click", ChkValidate)) // Attach click events to nodes
checkboxes = Array.from(checkboxes) // Allows then to use .filter
&#13;
<input class="checkbox" type="checkbox"/>
<input class="checkbox" type="checkbox"/>
<input class="checkbox" type="checkbox"/>
<input class="checkbox" type="checkbox"/>
<input class="checkbox" type="checkbox"/>
<input class="checkbox" type="checkbox"/>
&#13;
答案 4 :(得分:0)
问题在于条件检查表达式。
=
用于从右到左分配值,例如。此处var x = 10;
10
已分配给x
,比较==
用于例如。if (x == y)
,您在此处比较x
是否等于y
function changed(e){
var message = e.target.checked ? ' is checked' : ' is unchecked';
switch(e.target.id){
case 'CheckBox1': alert(e.target.id + message); break;
case 'CheckBox2': alert(e.target.id + message); break;
case 'CheckBox3': alert(e.target.id + message); break;
case 'CheckBox4': alert(e.target.id + message); break;
}
}
&#13;
<input type="checkbox" id="CheckBox1" onClick="changed(event)" />
<input type="checkbox" id="CheckBox2" onClick="changed(event)" />
<input type="checkbox" id="CheckBox3" onClick="changed(event)" />
<input type="checkbox" id="CheckBox4" onClick="changed(event)" />
&#13;
因为
javascript
区分大小写,这意味着hello
和Hello
与其不同,而且这正是您的问题所在。
if (document.getElementById("chkDytLek").checked == true) {
/* your code */
}
应改为
if (document.getElementById("ChkDytLek").checked == true) {
* your code */
}
parameters
应该与实际情况完全相同。
答案 5 :(得分:0)
function ChkValidate() {
var aCheckboxes = document.querySelectorAll('input[type="checkbox"]');
var count = document.querySelectorAll('input[type="checkbox"]:checked').length;
if (count === 2) {
for (var i = 0; i < aCheckboxes.length; i++) {
if (!aCheckboxes[i].checked) {
aCheckboxes[i].disabled = true;
}
};
} else {
for (var i = 0; i < aCheckboxes.length; i++) {
aCheckboxes[i].disabled = false;
};
}
}
<input type="checkbox" onChange="ChkValidate();" />
<input type="checkbox" onChange="ChkValidate();" />
<input type="checkbox" onChange="ChkValidate();" />
<input type="checkbox" onChange="ChkValidate();" />
答案 6 :(得分:0)
document.getElementById("checkBoxparent").addEventListener("change", ChkValidate);
var checkBoxentry = []
function ChkValidate(e) {
checkBoxentry.push(e.target.getAttribute("id"));
if(checkBoxentry.length >= 3){
alert("Please select only two");
e.target.checked = false;
}
答案 7 :(得分:0)
经过搜索和研究,我发现解决方案非常简单。在复选框标签中,我需要将客户端ID添加为静态,而Java脚本功能则完美无缺。
<asp:CheckBox ID="ChkDytLek" runat="server" class="llogariDyt"
GroupName="Monedha" Text="Lek" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" />