Javascript:如何在复选框中只选中一项

Javascript: How to check only one item in checkbox

本文关键字：一项 复选框 Javascript      更新时间：2023-09-26

请帮忙，我无法对只能选中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;
}
}

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

 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演示

将您的复选框分组为

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

演示

相关文章：