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