jQuery onclick show value of dynamic checkboxes

Question

I have this group of checkboxes displayed using a while loop form sql select. The checkboxes have values assigned to them from sql. I have assigned all the checkboxes the same class.

If I click on one of them, I want the value shown in an alert using jQuery`.

Code:

<?php
//$class=trim("YEAR 1");
$rec = mysqli_query($db, "SELECT * from studentbyclass where CLASS='$class'  "); 
                        
while($row = mysqli_fetch_array($rec)){
?>

<label class="form-check form-switch">
<input class="form-check-input students" type="checkbox"  value="<?php $row["STUDENT-ID"];?>" checked>
<span class="form-check-label students"><?php echo $row["STUDENT-NAME"];?></span>
</label>
           
<?php
}
?>

JQUERY

$(".students").on('click' , function(){         
            
  val = this.val();
        
  alert(val);           
});

.val() is a jquery function, not a htmlelement function. this is a html element. Wrap it in a jquery object to use .val() on it. E.g. $(this).val(). Or skip the overhead of making a jquery object for something so trivial and just write this.value. developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/value — ADyson
– ADyson, Commented Sep 1, 2024 at 17:48
This question is similar to: .val() is not a function. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. You should have been getting the "val is not a function" error in your console - did you check that? — ADyson
– ADyson, Commented Sep 2, 2024 at 8:15

Sathyapriya Muthukrishnan · Accepted Answer · 2024-09-02 08:13:10Z

0

The reason is you are using jQuery function with html element.

Either you should use html element with its value like this: this.value

$(".students").on('click' , function(){         
    val = this.value;
    alert(val);           
});

or jQuery selector with its jQuery function like this: $(this).val()

$(".students").on('click' , function(){         
    val = $(this).val();
    alert(val);           
});

answered Sep 2, 2024 at 8:13

Sathyapriya Muthukrishnan

3872 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery onclick show value of dynamic checkboxes

Code:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Code:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related