Javascript 如果选择一个复选框，则取消选择所有其他复选框

好的，我有一个复选框1、2、3、4和5的列表。我希望函数选择2、3、4和5，但如果选择1，则取消选择2、3、4和5，一旦取消选择2到5，将在div中显示消息

到目前为止，我可以选择1和其他之一。。。当选择1时，信息就会出现

问题1 一旦选择了1，我就无法取消选择2到5

问题2 即使取消选中该框，该消息也会在页面加载时显示

HTML

 <input type="checkbox" class="" value="checkbox" name="CheckboxGroup1" id="boxchecked"  />
one <br/>

<input type="checkbox" class="check" />
two <br/>

<input type="checkbox" class="check" />
three <br/>

<input type="checkbox" class="check" />
four <br/>

<input type="checkbox" class="check" />
five

<div id="hidden">Two to five can not be selected whilst you have one selected</div>

---

要取消选中复选框2-5，您可以使用以下方法：

$('input[name="CheckboxGroup1"]').on('click', function() {
  if ($(this).is(":checked")) {
    $('input.check').prop('checked', false);
  }
})

对于最初隐藏的消息，可以使用初始化功能将UI状态设置/重置为默认值

function initUI() {
  $('input[name=CheckboxGroup1]').attr('checked', false);
  $('#hidden').hide();
}

此外，对于使用

if…else

切换字段可见性的情况，应使用

.toggle（VisibilityValue）

---

您可以做的是，一旦选中复选框1，就可以禁用复选框2-5，然后显示消息。如果未选中其中一个复选框，您可以启用其他复选框并将消息隐藏为：

$（'input[type=“checkbox”]”）。在（'change'，function（）上{
if（$（'#boxchecked'）.prop（'checked'））{
$（'.check'）.attr（'disabled'，true）；
$（“#隐藏”）.show（）；
}
否则{
$（'.check'）.removeAttr（'disabled'）；
$（“#隐藏”）.hide（）；
}
})

#隐藏{
显示：无；
}

一个

两个

三个

四个

五
当您选择了一个时，不能选择两到五个

以下是我的建议。将只能在一个类中单独选中的复选框指定给另一个类，而将其他复选框指定给另一个类如何？
希望能有帮助

$（'input[type=“checkbox”]”）。在（'click'，function（）上{
if（$（this）.hasClass（'singlecheck'））{
如果（$（'input.multicheck'）。是（“：checked”））{
$（“#警告”）.show（）；
}
$（'input.multicheck'）.prop（'checked'，false）；
}否则{
$（'input.singlecheck'）.prop（'checked'，false）；
$（“#警告”）.hide（）；
}
});

一个

两个

三个

四个

五
当您选择一个时，无法选择两到五个
我想您需要这种类型的功能：

jQuery

var box = null;

$(document).ready(function() {

    $(".check").click(function() {


        box = this.id;

        $(".check").each(function() {
            if ( this.id == box )
            {
                this.checked = true;
                //$("#hidden").show();
                var cval =$(this).val();
                document.getElementById("get").innerHTML =cval;
            }
            else
            {
                this.checked = false;

            };        
        });
    });    
});

HTml代码

<input type="checkbox" class="check" value="one" name="CheckboxGroup1" id="one"  />
one <br/>

<input type="checkbox" class="check" id="two" value="two"   />
two <br/>

<input type="checkbox" class="check" id="three" value="three"   />
three <br/>

<input type="checkbox" class="check"  id="four" value="four"  />
four <br/>

<input type="checkbox" class="check" id="five" value="five"  />
five

<div id="hidden">This checkbox number is <label id="get">0</label></div>


一个

两个

三个

四个

五
此复选框编号为0

我希望它对您有用
如果我选择
1
，然后选择
2
，您必须使用
收音机
而不是
复选框
Hmm，除了我需要的功能，你可以选择2至5在同一时间，但不是当1是selected@Beep你可以检查下面这一个是完美的所有答案，它提供了我所需要的功能。谢谢。如果有多个类，您可以将
if（$（this）.attr（“class”）=='singlecheck'）
更改为
if（$（this）.hasClass（'singlecheck'））
。它看起来像是
“singlecheck test”==“singlecheck”
@Rajesh谢谢你的评论。还是jquery的新手，一直在学习：P更新了答案。@Rajesh好吧，他可以使用第一个复选框的id或其他属性来代替类。
var box = null;

$(document).ready(function() {

    $(".check").click(function() {


        box = this.id;

        $(".check").each(function() {
            if ( this.id == box )
            {
                this.checked = true;
                //$("#hidden").show();
                var cval =$(this).val();
                document.getElementById("get").innerHTML =cval;
            }
            else
            {
                this.checked = false;

            };        
        });
    });    
});

<input type="checkbox" class="check" value="one" name="CheckboxGroup1" id="one"  />
one <br/>

<input type="checkbox" class="check" id="two" value="two"   />
two <br/>

<input type="checkbox" class="check" id="three" value="three"   />
three <br/>

<input type="checkbox" class="check"  id="four" value="four"  />
four <br/>

<input type="checkbox" class="check" id="five" value="five"  />
five

<div id="hidden">This checkbox number is <label id="get">0</label></div>