CODEWITHSUNDEEP
javascriptjqueryvalidationradio-group
rajmathan
rajmathan

Reputation: 651

Using JQuery to dynamically check if no of radio button many group has been checked

I know this question had a lots of related resources. But, Still i need a perfect solution.

I have generated five number of radio buttons group dynamically. Each group holds upto five radio buttons. I have validated "none checked in" and "at least one checked in feature" as an individual group.

My question is, How do I validate whether "All the groups are checked"

for ref: enter image description here

My code Below:

var names = [];

$('input[type="radio"]').each(function() {
    // Creates an array with the names of all the different checkbox group.
    names[$(this).attr('name')] = true;
});

// Goes through all the names and make sure there's at least one checked.
for (name in names) {
    var radio_buttons = $("input[name='" + name + "']");
    if (radio_buttons.filter(':checked').length == 0) {
        alert('none checked in ' + name);
    } 
    else{
        // At least one checked
        var val = radio_buttons.val();
    }
}

I need to redirect to other page when all the radio button groups are checked. Its a bit simple. But, look complex for me.

Please Help.

UPDATE My generated HTML for first two groups.

    <div class="row">
    <div class="optionsContainer"><div id="ratingContainer">
    <ul class="0">
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="0" id="1"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="0" id="2"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="0" id="3"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="0" id="4"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="0" id="5"></div></li>
    </ul></div></div></div>

    <div class="row">
    <div class="optionsContainer"><div id="ratingContainer">
    <ul class="0">
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly disagree" name="1" id="1"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Disagree" name="1" id="2"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Neutral" name="1" id="3"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Agree" name="1" id="4"></div></li>
        <li onclick="checkThis(this);"><div class="ui-radio"><input type="radio" value="Strongly agree" name="1" id="5"></div></li>
    </ul></div></div></div>

note: Here group name alone gets changed.

Upvotes: 1

Views: 1566

Answers (3)

Stuiterbal
Stuiterbal

Reputation: 457

https://jsfiddle.net/eu6L1f80/2/

Javascript:

$('form').on('submit', function(e) {
    e.preventDefault();

    var checkboxes = {};
    $(':checkbox').each(function() {
        checkboxes[$(this).attr('name')] = true;
    });

    $.each(checkboxes, function(i, val) {
        if($(':checkbox[name='+i+']').is(':checked')) delete checkboxes[i];
    });

    if (!Object.keys(checkboxes).length) {
        alert('success!');
    } else {
        alert('error!');
    }
});

HTML:

<form>
    <div>
        Group:
        <input type="checkbox" name="group1" value="" />
        <input type="checkbox" name="group1" value="" />
        <input type="checkbox" name="group1" value="" />
    </div>
    <div>
        Group:
        <input type="checkbox" name="group2" value="" />
        <input type="checkbox" name="group2" value="" />
        <input type="checkbox" name="group2" value="" />
    </div>
    <div>
        Group:
        <input type="checkbox" name="group3" value="" />
        <input type="checkbox" name="group3" value="" />
        <input type="checkbox" name="group3" value="" />
    </div>
    <button type="submit">Submit</button>
<form>

Upvotes: 0

guest271314
guest271314

Reputation: 1

Changed

<div id="ratingContainer">

to

<div class="ratingContainer"> .

Removed

onclick="checkThis(this);"

from html , added one event handler for all input elements

elems.find("input").on("change", checkThis);

Try

var allChecked = false;

var names = [];

var elems = $(".0");

function checkThis(e) {
  var name = e.target.name;
  if (names.length < elems.length) {
    names.push(name);
  };

  allChecked = elems.get().every(function(el, i) {
    return $(el).find(":checked").is("*")
  });

  alert(name + " checked");

  if (allChecked) {
    // do stuff
    alert(names.join(" and ") + " checked, " + "allChecked:" + allChecked);
  };

};

elems.find("input").on("change", checkThis);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
  <div class="optionsContainer">
    <div class="ratingContainer">
      <ul class="0">
        <li>
          <div class="ui-radio">
            <input type="radio" value="Strongly disagree" name="0" id="1">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Disagree" name="0" id="2">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Neutral" name="0" id="3">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Agree" name="0" id="4">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Strongly agree" name="0" id="5">
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="row">
  <div class="optionsContainer">
    <div class="ratingContainer">
      <ul class="0">
        <li>
          <div class="ui-radio">
            <input type="radio" value="Strongly disagree" name="1" id="1">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Disagree" name="1" id="2">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Neutral" name="1" id="3">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Agree" name="1" id="4">
          </div>
        </li>
        <li>
          <div class="ui-radio">
            <input type="radio" value="Strongly agree" name="1" id="5">
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 2

simpleManderson
simpleManderson

Reputation: 436

Looks like you already know how to count up the checked elements. If you put that in the first loop, you can mark a variable false if any come up empty.

var names = [];
var allChecked = true;

$('input[type="radio"]').each(function() {
    // Creates an array with the names of all the different checkbox group.
    names[$(this).attr('name')] = true;
    if $(this).filter(':checked').length === 0 {
        allChecked = false;
    }
});

Upvotes: 1

Related Questions