Hello, need help in jQuery?

JavaScript
1

Here is my code,

<!--check box  -->
<div class="form-group row ques-ans ques-ans-21" data-submitted="" data-ans="1" data-qid="21">
   <div class="col-sm-12">
	<strong><label class="form-control-label" style="display: inline-block;">what is length of wire required for connect the bulb and switch ?</label></strong>
	<ul class="data-attribute-section alert alert-warning">
	   <li id="0" name="form-control-label-0" style="display: none"></li>
	   <li id="1" name="form-control-label-1" style="display: none">That's Right</li>
	   <li id="2" name="form-control-label-2" style="display: none"></li>
	   <li id="3" name="form-control-label-3" style="display: none"></li>
	</ul>			
	</div>
<div class="col-sm-9">
	<input type="hidden" name="training_answers[1][answer]" value="">

<div class="checkbox" data-index="0">
	<label for="training-answers-1-answer-a.-6-inches">
		<input type="checkbox" name="training_answers[1][answer][]" value="A. 6 inches" id="training-answers-1-answer-a.-6-inches">A. 6 inches
	</label>
</div>
<div class="checkbox" data-index="1">
		<label for="training-answers-1-answer-b.-12-inches">
			<input type="checkbox" name="training_answers[1][answer][]" value="B. 12 inches" id="training-answers-1-answer-b.-12-inches">B. 12 inches</label>
</div>
<div class="checkbox" data-index="2">
	<label for="training-answers-1-answer-c.-2-inches">
		<input type="checkbox" name="training_answers[1][answer][]" value="C. 2 inches" id="training-answers-1-answer-c.-2-inches">C. 2 inches</label>
</div>
<div class="checkbox" data-index="3">
	<label for="training-answers-1-answer-d.-no-distance-required">
	<input type="checkbox" name="training_answers[1][answer][]" value="D. No distance required" id="training-answers-1-answer-d.-no-distance-required">D. No distance required</label>
</div>	<input type="hidden" name="training_answers[1][training_questions_id]" id="training-answers-1-training-questions-id" value="21">
</div>
<!---->

		
<div class="col-sm-9">
	<button type="button" class="btn btn-success btn-sm m-2 sendData">Evaluate</button><span class="chk-ans font-weight-bold"></span>
</div>
				
</div>

<!--Radio Box  --> 

<div class="form-group row ques-ans ques-ans-22" data-submitted="1" data-ans="0" data-qid="22">
<div class="col-sm-12">
	<strong><label class="form-control-label" style="display: inline-block;">True or False: A Minor violation is when a Unsafe Condition is created that has non-serious consequences?</label></strong>
	<ul class="data-attribute-section alert alert-warning">
		<li id="0" name="form-control-label-0" style="display: none">This is true</li>
		<li id="1" name="form-control-label-1" style="display: none"></li>
	</ul>			
</div>
<div class="col-sm-4">
<div class="form-check">
	<div class="radio" data-index="0"><label class="selected" data-val="A. True" for="training-answers-2-answer-a.-true"><input type="radio" name="training_answers[2][answer]" value="A. True" id="training-answers-2-answer-a.-true" checked="checked">A. True<span class="check-ans m-3 text-success"><span class="fa fa-check-circle"></span></span></label>
	</div>
	<div class="radio" data-index="1"><label class="" data-val="B. False" for="training-answers-2-answer-b.-false"><input type="radio" name="training_answers[2][answer]" value="B. False" id="training-answers-2-answer-b.-false">B. False<span class="check-ans m-3 text-danger"><span class="fa fa-times-circle"></span></span></label>
	</div>		
	<input type="hidden" name="training_answers[2][training_questions_id]" id="training-answers-2-training-questions-id" value="22">
</div>
</div>
<div class="col-sm-9">
	<button type="button" class="btn btn-success btn-sm m-2 sendData">Evaluate</button>		<span class="chk-ans font-weight-bold"></span>
</div>
				
</div>


<div class="form-group row ques-ans ques-ans-39" data-submitted="" data-ans="" data-qid="39">
<div class="col-sm-12">
	<strong><label class="form-control-label" style="display: inline-block;">Test Input</label></strong>
	<ul class="data-attribute-section">
	</ul>
</div>
<div class="col-sm-9">
	<div class="input text"><input type="text" name="training_answers[11][answer]" class=" form-control " data-role="" id="training-answers-11-answer" value="">
	</div>	
<input type="hidden" name="training_answers[11][training_questions_id]" id="training-answers-11-training-questions-id" value="39">
</div>
<div class="col-sm-9">
	<button type="button" class="btn btn-success btn-sm m-2 sendData">Evaluate</button>		<span class="chk-ans font-weight-bold"></span>
</div>
</div>

when i check any check box then if li tag have an text then show the text and alert box if all li tags are empty then hide alert box. tired so much code but not geting any Idea Please help me i stcuk on code.

jQuery('body').on('change','.checkbox input',function(){
	var sel;
	var chkWarnings;
	var id = jQuery(this).parents('.checkbox').attr('data-index');
	if(jQuery(this).is(':checked')){
	  var selectWrapper = jQuery(this).parents('.ques-ans').find('.data-attribute-section li');
      chkWarnings = selectWrapper.eq(id);
      checkWarnings(selectWrapper,id);
      // selectWrapper.eq(id).css('display','block');
      
    }else{
      var selectWrapper = jQuery(this).parents('.ques-ans').find('.data-attribute-section li');
      selectWrapper.eq(id).css('display','none');
      chkWarnings = selectWrapper.eq(id);
    
      console.log("false");		
    }
     
});

function

function checkWarnings(chkWarnings,id) {
	console.log(id);
  var cnt =0;
	chkWarnings.each(function(){
		console.log(jQuery(this).attr('style'));
		if(jQuery(this).attr('style') == 'display:block'){
			cnt++;
		}
	});
		
	

	// console.log(chkWarnings.parent().css('background','red'));

	// console.log(chkWarnings.parents('.ques-ans').find('input[type=checkbox]'));

console.log("count "+cnt);
	if(cnt==0){
        chkWarnings.parent().removeClass('alert alert-warning');
	}
	if(cnt > 0){
		chkWarnings.eq(id).css('display','block');
		chkWarnings.parent().addClass('alert alert-warning');
	}
}
2

This solved myself :innocent: