Dynamic created checkbox validation is not working properly in jquery

Question

I need to validate the dynamically created checkbox,for each question some checkbox answer, user select at least one...only first checkbox answer is worked for all the questions if select second checkbox it shows not checked.user can select any option.

$(function() {
  //function validate_form() {
  $("#continueButton").click(function() {
    $('input:checkbox').map(function() {
      //var rname = $(this).attr('name');
      var rname = $(this).attr('id');
      console.log(rname);
      var check_box = $('#' + rname),
        names1 = $.unique(check_box.map(function() {
          return this.name;
        })),
        checked = check_box.filter(function() {
          return this.checked;
        });
      alert(names1.length);
      alert(checked.length);
      //alert(check_box.is(':checked'));
      //alert(check_box.is(':checked'));
      if (names1.length != checked.length) {
        //alert('all answers are checked');
        isCheck = false;
        alert("select checkbox");
        //$('#e_'+rname).html("Please select the answer");
        return false;
      }
    });
    if (isCheck) {
      //return true;
      flagchk = 1
    } else {
      flagchk = 0;
      return false;
    }
    if (flagchk == 1) {
      //if(flagradio == 1 && flagchk==1){
      return true;
    } else {
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form name="sample" id="sample" method="post" action="sample.php">
  <label for="How was the breakfast?" id="label_error">How was the breakfast?</label>
  <br>
  <input type="checkbox" id="20" name="20_85" style="width: auto;display: inline-block;height: auto;" value="85" class="checkbox_check">&nbsp;Not good
  <input type="checkbox" id="20" name="20_84" style="width: auto;display: inline-block;height: auto;" value="84" class="checkbox_check">&nbsp;Good
  <span class="red_12">*</span>
  <br>
  <label for="How was the meal ?" id="label_error">How was the meal ?</label>
  <br>
  <input type="checkbox" id="28" name="28_92" style="width: auto;display: inline-block;height: auto;" value="92" class="checkbox_check">&nbsp;Good
  <input type="checkbox" id="28" name="28_93" style="width: auto;display: inline-block;height: auto;" value="93" class="checkbox_check">&nbsp;Average
  <input type="checkbox" id="28" name="28_94" style="width: auto;display:    inline-block;height: auto;" value="94" class="checkbox_check">&nbsp;Not good
  <div class="two-col buttonContainer">
    <a href="javascript:void(0);" id="continueButton" class="button">Book It Now</a>
  </div>
</form>

thanks @ Rayon Dabre...if i select notgood it is shows check as 1. — Fakkir mohamed Sait, Mar 09 '16 at 04:30
check the validation,if select first option ok,if select second option it is not validating...it show please check the answer.. — Fakkir mohamed Sait, Mar 09 '16 at 04:32
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105754/discussion-between-fakkir-mohamed-sait-and-rayon-dabre). — Fakkir mohamed Sait, Mar 09 '16 at 04:34
Use radio button instead of check box.. OR if u are using check box check th link http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group — Mohammedshafeek C S, Mar 09 '16 at 04:56

score 0 · Answer 1 · answered Mar 09 '16 at 05:03

Use a parent div to for am group of the question so that manipulations will be easier.

$(':checkbox') selector will return all the elements having type as checkbox

.filter can be used to filter out element based on the condition.

Try this:

$("#continueButton").click(function() {
  $('.form-elem').each(function() {
    var length = $(this).find(':checkbox').filter(function() {
      return this.checked;
    }).length;
    if (length == 0) {
      alert($(this).find('label').text() + ' :: not answered!');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form name="sample" id="sample" method="post" action="sample.php">
  <div class="form-elem">
    <label for="How was the breakfast?" id="label_error">How was the breakfast?</label>
    <br>
    <input type="checkbox" id="20" name="20_85" style="width: auto;display: inline-block;height: auto;" value="85" class="checkbox_check">&nbsp;Not good
    <input type="checkbox" id="20" name="20_84" style="width: auto;display: inline-block;height: auto;" value="84" class="checkbox_check">&nbsp;Good
    <span class="red_12">*</span>
  </div>
  <br>
  <div class="form-elem">
    <label for="How was the meal ?" id="label_error">How was the meal ?</label>
    <br>
    <input type="checkbox" id="28" name="28_92" style="width: auto;display: inline-block;height: auto;" value="92" class="checkbox_check">&nbsp;Good
    <input type="checkbox" id="28" name="28_93" style="width: auto;display: inline-block;height: auto;" value="93" class="checkbox_check">&nbsp;Average
    <input type="checkbox" id="28" name="28_94" style="width: auto;display:    inline-block;height: auto;" value="94" class="checkbox_check">&nbsp;Not good
  </div>
  <div class="two-col buttonContainer">
    <a href="javascript:void(0);" id="continueButton" class="button">Book It Now</a>
  </div>
</form>

Fiddle here

Dynamic created checkbox validation is not working properly in jquery

1 Answers1