Highlighting with php generated checkbox form

Question

I have this page setup where I can highlight the selected values with checkbox on the table. And this code works fine. https://jsfiddle.net/zt54jqtL/

When I try to replace the static form1 code with the following php generated code, it doesn't highlight the selected cells. How can I fix this problem? please. Thank you!

The php code that I implement is this:

<?php 

include 'etc/config.php';

mysqli_select_db($conn, $dbname);

$subjectName = 'SELECT * FROM tablea order by Week DESC';
$subject = mysqli_query($conn, $subjectName);
?>

  <div>
 <form method="post" action=" ">

<?php 

while ($data = mysqli_fetch_array($subject)) {
    echo "<div>";
    echo "<input type='checkbox'  class='selector' value='{$data['Value1']}'>" . $data['Value1'];
    echo "<input type='checkbox'  class='selector' value='{$data['Value2']}'>" . $data['Value2'];
    echo "<input type='checkbox'  class='selector' value='{$data['Value3']}'>" . $data['Value3'];
    echo "<input type='checkbox'  class='SelectAll'>All";
     echo "</div>";
}
?>


 </form>
   <script>

    $(".SelectAll").click(function () {
        $(this).parent().find('input:checkbox').not(this).prop('checked', this.checked);
    });
</script>

I think your problem is related to dynamic content event binding please refer to this [link](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements). — vikscool, May 21 '18 at 05:32
@vikscool dynamic content binding shouldn't be a problem since the items are added on the server side and not client side — protango, May 21 '18 at 05:41
Working fine on mine. Did you check your browser console as if there is any javascript errors or did you forgot to load jquery — Suraj Kc, May 21 '18 at 05:55
What works fine exactly with your browser? It works when I click an individual value, but not with select all. — Max, May 21 '18 at 05:57
hmm. that's strange. I tried this on chrome, firefox, and opera. It didn't work for me. — Max, May 21 '18 at 06:02

protango · Accepted Answer · 2018-05-21T06:08:27.780

In your PHP, you are generating checkboxes with their value attribute set to the number you're looking for.

However, if you're using the same JS found in the fiddle, it is looking for the name of the checkbox instead:

var checked = $(".selector:checked").map(function() {
  return this.name
}).get()

You need to change your JS to grab the value instead like this:

var checked = $(".selector:checked").map(function() {
  return this.value
}).get()

Additionally, your script at the end of the PHP file doesn't trigger the click even on the other checkboxes, therefore the highlighting function doesn't fire. Try this instead:

<script>
    $(".SelectAll").click(function () {
      if (this.checked) 
          $(this).parent().find('.selector:not(:checked)').click();
      else
          $(this).parent().find('.selector:checked').click();
    });
</script>

Sorry, your solution is partially right. when I click the individual values, it highlights on the table. but it doesn't highlight when I click "all". — Max, May 21 '18 at 05:54

Highlighting with php generated checkbox form

1 Answers1