'Show or hide div based on selection

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

javascripthtmljquery


Solution 1:[1]

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!

=========UPDATE==========

Previous code works, but it can be wrote in this way to have better performance

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions