Show or hide div based on selection-CodePudding

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 >
 <input type="checkbox" name="course[]"   
 id="'.$coursePrice.'" value="'.$courseId.'">
 <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.'"  >            
                   <div >
                   <input  type="radio" id="timeRadio" 
                    value="Weekday" name="time['.$courseId.']" />
                    <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

CodePudding user response：

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();
      }
  });`