CODEWITHSUNDEEP
javascriptjquery
Max
Max

Reputation: 940

Highlighting with php generated checkbox form

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>

Upvotes: 2

Views: 56

Answers (1)

protango
protango

Reputation: 1322

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>

Upvotes: 1

Related Questions