如果选中多个复选框，如何添加javascript警报消息？

Question

我的代码是这样的：

＆＃13;

＆＃13;

<div class="col-md-4">
  <ul class="list-unstyled">
    <li><strong>England</strong></li>
    <li>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Chelsea
        </label>
      </div>
    </li>
    <li>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Mu
        </label>
      </div>
    </li>
    <li>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Arsenal
        </label>
      </div>
    </li>
  </ul>
</div>
<div class="col-md-4">
  <ul class="list-unstyled">
    <li><strong>Spain</strong></li>
    <li>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Madrid
        </label>
      </div>
    </li>
    <li>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Barcelona
        </label>
      </div>
    </li>
    <li>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Atletico
        </label>
      </div>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13; jsfiddle：https://jsfiddle.net/oscar11/m7by6zcw/

在每个复选框组中，用户最多只能选择1.如果用户选择的值超过1，我想显示警告信息。
例如在英格兰复选框组中，如果用户选择切尔西，然后再次选择阿森纳，则必须显示警告信息。

我该怎么做？

我试了一下。但我仍然感到困惑

Answer 1

试试这个

＆＃13;

＆＃13;

$('input[type="checkbox"]').change(function(){
  var group = $("ul.list-unstyled");
  for(var i=0;i<group.length;i++){
    if($("input:checked",group[i] ).length>1){
      alert("Not allowed to select more than one");
      this.checked = false;
      return;
    }
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>England</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Chelsea
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Mu
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Arsenal
                </label>
            </div>
        </li>
    </ul>
</div>
<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>Spain</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Madrid
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Barcelona
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Atletico
                </label>
            </div>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为更好的选择是将单选按钮设置为看起来像复选框：

非常好的例子我用Google搜索：http://cssdeck.com/labs/ldmtsmfk

所以你不需要为改变单选按钮默认行为的JS逻辑而苦苦挣扎。

Answer 3

没有jQuery。

＆＃13;

＆＃13;

radGridView.HyperlinkOpening += radGridView_HyperlinkOpening;

private void radGridView_HyperlinkOpening(object sender, HyperlinkOpeningEventArgs e)
{
    Process.Start("www.google.com");
}

＆＃13;

var checkboxes = document.querySelectorAll('[type="checkbox"]');
for (var ix = 0, length = checkboxes.length; ix < length; ix++) {
  checkboxes[ix].addEventListener('change', function() {
    if (document.querySelectorAll(':checked').length > 1) {
      alert('no');
      this.checked = false;
    }
  });
}

＆＃13;

＆＃13;

＆＃13;