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

时间:2018-04-10 09:07:35

标签: javascript c# .net checkbox

我有一些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;
    }
}

8 个答案:

答案 0 :(得分:1)

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

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

应该是:

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

答案 1 :(得分:0)

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

替换代码并指定正确的classesId'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/

答案 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)

我个人会使用这种代码(更短更优雅):

&#13;
&#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;
&#13;
&#13;

答案 4 :(得分:0)

  

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

&#13;
&#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;
&#13;
&#13;

因为

  

javascript 区分大小写,这意味着helloHello与其不同,而且这正是您的问题所在。

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" />