Question

我有一些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()" />&nbsp;&nbsp; <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()" />&nbsp;&nbsp; <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()" />&nbsp;&nbsp; <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;
    }
}

Answer 1

这是因为if条件中的单个'='。

if (document.getElementsByClassName("chkDytLek").checked = true)

应该是：

if (document.getElementById("chkDytLek").checked == true)

Answer 2

第一件事chkDytLek不是您的代码中的类这是Id和单=用于分配而不是用于比较

替换代码并指定正确的classes和Id's

document.getElementById("chkDytLek").checked == true

注意 - ＆gt; getElementById将提供单个dom元素，因为Id在Dom中是唯一的 getElementsByClassName将为您提供一个数组，因此您需要为此类

进行检查

document.getElementsByClassName("someclass").checked = true

如果您想要具有类名的上述功能，请检查此

https://stackoverflow.com/a/14967895/6236938

http://jsfiddle.net/4mYbD/3/

Answer 3

你可以用一个条件而不是多个条件来实现，

function ChkValidate() {
    var countClicks = document.querySelectorAll('input[type="checkbox"]:checked').length

    if(countClicks > 2){
      alert('Pick Just Two Please')
      document.forms;
      return false;
    }
}

Answer 4

我个人会使用这种代码（更短更优雅）：

＆＃13;

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;

Answer 5

问题在于条件检查表达式。 =用于从右到左分配值，例如。此处var x = 10; 10已分配给x，比较 ==用于例如。 if (x == y)，您在此处比较x是否等于y

＆＃13;

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应该与实际情况完全相同。

Answer 6

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();" />

Answer 7

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

Answer 8

经过搜索和研究，我发现解决方案非常简单。在复选框标签中，我需要将客户端ID添加为静态，而Java脚本功能则完美无缺。

<asp:CheckBox ID="ChkDytLek" runat="server" class="llogariDyt"                                
                                GroupName="Monedha" Text="Lek" CssClass="radioMarginLeft" onClick="ChkValidate()" ClientIDMode="Static" />

从Java Script函数中获取复选Box值

8 个答案: