Javascript:如何只选中复选框中的一个项目

时间:2014-09-23 09:05:58

标签: javascript html

请帮助,我无法编码只能检查1项的复选框。任何帮助,将不胜感激。感谢

HTML

  <input type="checkbox" name="<%=Name %>" onClick="return checkbox(this)" >

的Javascript

function checkbox(a) {

var Count = 0;

if (a.checked)
{
Count = Count + 1;

}

if (Count == 2)
{
alert('choose One Please');
    return false;
}
}

2 个答案:

答案 0 :(得分:2)

将您的复选框分组为

<input type="checkbox" class="radio" value="1" name="test[1][]" />
<input type="checkbox" class="radio" value="1" name="test[1][]" />
<input type="checkbox" class="radio" value="1" name="test[1][]" />
<br/>
Group 2
<input type="checkbox" class="radio" value="1" name="test[2][]" />
<input type="checkbox" class="radio" value="1" name="test[2][]" />
<input type="checkbox" class="radio" value="1" name="test[2][]" />

查询

$("input:checkbox").click(function() {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
});

DEMO

答案 1 :(得分:2)

您在方法中声明计数,因此当您单击复选框时,它将始终初始化为0。因此,全局声明计数并保持计数。

 var NewCount = 0;// global declaration


function KeepCount(a){

     if (a.checked){
          NewCount = NewCount + 1;
     }else{
          NewCount = NewCount - 1;
     }

     if(NewCount>1){
       alert('Pick Just One Please');
       return false;
     }
}

<强>更新

如果您不想全局添加变量,则采用另一种方法:

<强> HTML

Group 1
<input type="checkbox"  value="1" name="test[1][]" onclick="addClassCheck(this)"/>
<input type="checkbox"  value="1" name="test[1][]" onclick="addClassCheck(this)"/>
<input type="checkbox"  value="1" name="test[1][]" onclick="addClassCheck(this)"/>
<br/>
Group 2
<input type="checkbox"  value="1" name="test[2][]" onclick="addClassCheck(this)"/>
<input type="checkbox"  value="1" name="test[2][]" onclick="addClassCheck(this)"/>
<input type="checkbox"  value="1" name="test[2][]" onclick="addClassCheck(this)"/>

<强>的JavaScript

function addClassCheck(element){

    if(element.checked){
        element.classList.add("marked");
    }else{
        element.classList.remove("marked");
    }

    if(document.getElementsByClassName("marked").length>1){
      alert("Please select only one check box");
        element.checked=false;
        element.classList.remove("marked");
    }

}

Fiddle demo