Show or hide div based on selection

Issue

I am new to JQuery and I want to make a simple function. I have a div that is named based on an id of a checkbox. I want the div to be shown only if its checkbox is checked but the code is not working. It show me this error ($courseTimeDiv.hide is not a function).

this is the part where I define the checkbox

`$programList .= ' <div class="form-check proDiv">
 <input type="checkbox" name="course[]"  class="form-check-input group2" 
 id="'.$coursePrice.'" value="'.$courseId.'">
 <label class="form-check-label" for="'.$coursePrice.'">'.$courseName .' 
 price is '.$coursePrice.'$</label>
 </div>';`

this is the part of HTML code where I define the div

` $programList .= '<div name="timeDiv'.$courseId.'" class="timeGroup" >            
                   <div class="form-check form-check-inline">
                   <input class="form-check-input" type="radio" id="timeRadio" 
                    value="Weekday" name="time['.$courseId.']" />
                    <label class="form-check-label"><strong>Weekdays</strong> 
                    </div> </div>';
                               `

and this is the JQuery code

`$("input[name='course[]']").on('change', function () {
      
      var  $courseIdValue = $('input[name="course[]"]:checked').val(); 

      var  $courseTimeDiv =  $("input[name='timeDiv']") + $courseIdValue;

        if($courseTimeDiv.match(/$courseIdValue/)) {
            $courseTimeDiv.show(300);
            } 
            else {
              $courseTimeDiv.hide();
            }
      });`

any help is appreciated

Solution

var $courseTimeDiv = $("input[name='timeDiv']") + $courseIdValue;

what are you trying to do in this line?

IF, you’re trying to select an element, then you can’t use match method on it in the next line

IF, you’re trying to create element’s selector, then js engine is right and your variable does not have an element so you can select it

and in both scenarios you’re doing it wrong because you’re selecting an input element with name=’timeDiv’+blabla while in your code there is no such element

I believe you meant

   var selector = "div.timeDiv" + $courseIdValue
   var  $courseTimeDiv =  $(selector);
   

it’s not this simple
you have multiple checkboxes and each checkbox has it’s own value, and you want all the selected ones

so
you need to process them to see which one is selected and which one is not, and match method won’t help you in this process

`$("input[name*='course']").on('change', function () {

      var  value = $(this).val();
      var  selector = "div[name*=[timeDiv" + value + "]" 
      var  courseTimeDiv =  $(selector);
      
      if( $(this).is(':checked') ){
          courseTimeDiv.show(300);
      } else {
          courseTimeDiv.hide();
      }
  });`

I think this should work!

Answered By – Mahdiar Mransouri

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.