CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
moses toh
moses toh

Reputation: 13172

How can I add a javascript alert message if checkbox is checked more than one?

My code is like this:

<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>
jsfiddle: https://jsfiddle.net/oscar11/m7by6zcw/

In each checkbox group, the user can only select a maximum of 1. If the user selects more than 1, I want to display alert messages.
For example in the England checkbox group, if the user chooses Chelsea, then chooses Arsenal again, it must display an alert message.

How can I do it?

I tried it. But I'm still confused

Upvotes: 0

Views: 444

Answers (3)

Will
Will

Reputation: 3241

Without jQuery.

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

Upvotes: 0

Mr. A
Mr. A

Reputation: 1231

Try this

$('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;
    }
  }
})
<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>

Upvotes: 1

Chris Lam
Chris Lam

Reputation: 3614

I think a better option is to style radio buttons to look like checkboxes:

Very nice example I googled: http://cssdeck.com/labs/ldmtsmfk

So you don't need to struggle with JS logic which change the default behavior of radio buttons.

Upvotes: 0

Related Questions