Javascript 使用网页中的复选框

我有一组复选框，这是必须应用的，但情况是用户一次只能选中一个复选框。因此，我在互联网的帮助下实现了类似的东西。毫无疑问，当默认情况下没有选中复选框时，它可以正常工作。但假设在页面加载时，其中一个复选框被选中为true，那么当我点击复选框两次时，这就不起作用了

以下是我正在使用的：

所以，假设我有5个复选框，我为所有复选框设置相同的类名，然后

<input type="checkbox"  class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox"  class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox"  class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox"  class="myclass" onclick="Checkme(this.className);"/>
<input type="checkbox"  class="myclass" onclick="Checkme(this.className);"/>

共同点：

function Check_OR_Uncheck(class_Name) {
    $("." + class_Name).click(function () {
        if ($(this)[0].checked) {
            $("." + class_Name).each(function () {
                $(this)[0].checked = false;
            });
            $(this)[0].checked = true;
        }
        else {
            $(this)[0].checked = false;
        }
    });
} 

---

请帮助我实现这一点。

您可以使用文档就绪处理程序和调用方法：

---

将代码保存在document ready事件中。这将为“myclass”注册单击事件

试试这个

$(function(){
    $('.myclass').click(function(){

        var s=$(this).prop('checked');
        if(s==true)
        {
             $('.myclass').prop('checked',false)
              $(this).prop('checked',true)
        }

    });
});

$(function(){
  $('input:checkbox').prop('checked', false)
   $('input:checkbox').click(function(){
    if($(this).is(':checked')){
        $('input:checkbox').not(this).prop('checked', false);        
    }
  });
})

或

您只需使用

if(s==true)
        { 
            $(this).siblings().prop('checked',false);
        }

试试这个

$(function(){
    $('.myclass').click(function(){

        var s=$(this).prop('checked');
        if(s==true)
        {
             $('.myclass').prop('checked',false)
              $(this).prop('checked',true)
        }

    });
});

$(function(){
  $('input:checkbox').prop('checked', false)
   $('input:checkbox').click(function(){
    if($(this).is(':checked')){
        $('input:checkbox').not(this).prop('checked', false);        
    }
  });
})

---

与其实现一组行为类似于一组单选按钮的复选框，我建议实现一组外观类似于一组复选框的单选按钮：

input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}

这种方法简化了您的实现；您有两个单行CSS规则，而不是JS事件处理函数，即事件绑定（在document ready和HTML元素本身上），更不用说可能依赖于jQuery（如果您选择使用它）

---

这种方法的关键在于它需要CSS3支持。要了解更多信息，请查看此答案：

小提琴会很好。。！为什么不使用单选按钮<代码>是。你是对的。它在document.ready中工作，但问题是我有很多表单，如果我有数千个复选框。对于每个组，如果我定义一个类，对于每个类，如果我必须编写上面的方法，那是不好的。这就是为什么我保存在一个单独的.js文件中，但我没有工作。函数“Check_或_Uncheck”在公共js文件中，而另一个在特定页面中。但它只是部分工作。实际上，我还需要在准备就绪的情况下声明它，以使它正常工作。是吧?？如果是，那么假设我在一个页面中有数百个复选框，并且有多组复选框，那么代码行数越少越好。您可以在文档中调用“Check\u或\u Uncheck”方法。通过传递用于注册特定组的单击事件的类名即可。但是这里的问题是，如果你想注册10个组，你需要调用这个方法10次。因此，只需修改Check或Uncheck方法，如下所示：函数Check或Uncheck（）{var class_name，i，len；for（i=0，len=arguments.length；它可以调用Check或Uncheck（'class1'，'class2'，'class3'）；这将获取所有类并附加onclick事件处理程序。

input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}