Why does this JS code work only when "console.log()" is present?

This checkbox routine works only when console.log("message") is included. Remove "console.log()" and it stops working. What's wrong?

Purpose: When the user UNchecks any checkbox with class="one-role", then the checkbox with id="all-roles" should get unchecked.

JQUERY:

// FAILS: This version (without console) does not uncheck "All"
$('.one-role').click(function() {
    if(! $(this).attr('checked'))
     $('#all-roles').prop('checked', false);
});


// WORKS: This version (with console) successfully unchecks "All"
$('.one-role').click(function() {
    if(! $(this).attr('checked'))
     console.log("one-role now unchecked");  // <--- without me, no worky!
     $('#all-roles').prop('checked', false);
}

HTML FORM:

<input type="checkbox" name="include_role[]" value="all" checked="checked" id="all-roles">

<input type="checkbox" name="include_role[]" value="manager" checked="checked" class="one-role">
<input type="checkbox" name="include_role[]" value="owner" checked="checked" class="one-role">

<input type="submit" name="submit" value="Submit">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="http://example.com/assets/jquery.scrollTo.min.js"></script>
<script src="http://example.com/assets/my_javascript.js"></script>

What I've tried:

I'm using Chrome on Windows 10.

My .js file is loaded last.

After changing my js file, I upload to server and hard-refresh (CTRL REFRESH) my browser.

--Puzzled

DataTables display data from Mysql using columnDefs

When i try to display data from Mysql table using columnDefs all the data is displayed in a single column. How to display each data in its specific column?

Here is code:

$(document).ready(function() {
                    $('#panier_table').DataTable( {
                        "processing": true,
                        "serverSide": true,
                        "ajax": "",
                        columnDefs: [ {                        
                            data: "Piece",
                            data: "Order",                                                                                   
                            orderable: false,
                            className: 'select-checkbox',
                            targets:   0,
                        } ],
                        select: {
                            style:    'os',
                            selector: 'td:first-child'
                        },
                        order: [[ 1, 'asc' ]],  
                    } );
                } );

PHP Comparing checked checkbox values with columns that are supposed to contain that values in DB

Let's say I have a huge premade database with car information(columns) as followed(this DB already has like 3000 rows):

ID .... CAR NAME .... WHEEL SIZE .... YEAR OF PRODUCTION .... MAX SPEED

On mainpage user inputs 4 kinds of information in a form:

    <form action="sanitize.php" method="post"> 
                <input type="text" name="car_name"  placeholder="CAR NAME"><br>
                <input type="text" name="wheel_size" placeholder="WHEEL SIZE"><br>
                <input type="text" name="year" placeholder="YEAR of PROD"><br>
                <input type="text" name="max_speed" placeholder="MAX SPEED"><br>
                          <button>Submit </button>
</form>

I have created sanitize.php for future use if I’d like to insert those values into DB and it looks smth like this:

<?php

$dbServerName = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName = "cars";
$conn = mysqli_connect($dbServerName, $dbUsername, $dbPassword, $dbName);
// Sanitize POST Array
 $POST = filter_var_array($_POST, FILTER_SANITIZE_STRING);

 $car_name = mysqli_real_escape_string($conn, $POST['car_name']);
 $wheel_size = mysqli_real_escape_string($conn,$POST['wheel_size']);
 $year = mysqli_real_escape_string($conn,$POST['year']);
 $max_speed = mysqli_real_escape_string($conn,$POST['max_speed']);

session_start();
  $_SESSION['car_name'] = $car_name;
  $_SESSION['wheel_size'] = $wheel_size;
  $_SESSION['year'] = $year;
  $_SESSION['max_speed'] = $max_speed;

// Redirect to decide page
header('Location: decide.php');
?>

On decide.php page are checkboxes and based on which checkboxes user chooses to tick, the website will echo out the number of occurances it is inside database.

<form action="function.php" method="post">
  <input type="checkbox" name = "checkbox[]" value="<?php echo   $_SESSION['car_name']; ?>"> Car name<br>
  <input type="checkbox" name = "checkbox[]" value="<?php echo   $_SESSION['wheel_size']; ?>"> Wheel size<br>
  <input type="checkbox" name = "checkbox[]" value="<?php echo   $_SESSION['year']; ?>"> YEAR of PROD<br>
  <input type="checkbox" name = "checkbox[]" value="<?php echo   $_SESSION['max_speed']; ?>"> MAX SPEED<br>

  <button>Submit CHOICES</button>
</form>

For example if user ticked only car name and clicked button Submit CHOICES, the website will redirect the user to function.php and count and echo out the number of rows from DB that has the same name as he enetered.

If he ticked year of production AND wheel size the webpage(function.php) will count and echo out number of rows from DB where year of production AND wheel size are just like user entered.

Same goes for 3 ticked checkboxes, if he decides to tick max speed, year of production, and car name the webpage(function.php) will count and echo out number of rows from DB where max speed && year of production && car name match the user’s input.

I'd like to know if there's a way to create a function for this, not just manually using if statement for each case. It would be never-ending code like this if I decided that I need to add some extra columns into my database.

Comparing checked checkbox values with values in DB

Let's say I have a huge database with car information(columns) as followed:

ID .... CAR NAME .... WHEEL SIZE .... YEAR OF PRODUCTION .... MAX SPEED

User inputted all three required information and then he'll be redirected to another page.

On this page are checkboxes and based on which checkboxes he chose to tick, the website will echo out the number of occurances it is inside database.

For example if he ticked only car name, the website will count number of rows that has the same name as he enetered and echo number of rows. If he ticked year of production and wheel size the website will count number of rows where cars have same year of production AND same wheels size as user entered and echo it out. Every combination is with AND except for when only 1 checkbox is ticked.

I'd like to know if there's a way to create a function for this, not just manually using if statement for each case. It would be never-ending code like this if I decided that I need to add some extra columns into my database.

<form action="function.php" method="post">
  <input type="checkbox" name = "checkbox[]" value="<?php echo $car; ?>"> CAR NAME<br>
  <input type="checkbox" name = "checkbox[]" value="<?php echo $wheel_size; ?>"> WHEEL SIZE<br>
  <input type="checkbox" name = "checkbox[]" value="<?php echo $year; ?>"> YEAR OF PRODUCTION<br>
<input type="checkbox" name = "checkbox[]" value="<?php echo $speed; ?>"> MAX SPEED<br>
  <button>Submit CHOICES</button>
</form>

How to find proper checkbox locator

I am writing an automatic test in Selenium and I have a problem with the locator. The website address: https://talixo.pl/register/?next=/. I can'tt find the right locator for the last three check boxes. Depending on which locator I use, I get an error "element not interactable" or checkbox is ticked but in the new tab opens the page which is under the link "Read more". Please help!

How to use a loop that go througt checkbox and take their return value in Javascript (in a pdf)

I'm setting a form in Adobe, so i'm using Javascript directly in Adobe, and I have a problem with my loop. I've made an array of the checkbox name (Région1, Région2, etc.)

I've even tried a super-bad code with an "If" for each checkbox.
But even if I use " if (this.getField(tabRegions[i]).value != "Off")", even when the checkbox is not checked, it return either "Off" or "off" when I print regionSelect.

var tabRegions = ["Région1", "Région2", "Région3", "Région4", "Région5", "Région6", "Région7", "Région8", "Région9", "Région10", "Région11", "Région12", "Région13", "Région14", "Région15", "Région16", "Région17", "RégionTous"];

var regionSelect = "";

for (var i=0; i<= tabRegions.length; i++){
    if (this.getField(tabRegions[i]).value != "Off") {
        regionSelect = regionSelect + ", " + this.getField(tabRegions[i]).value;
    }
}

I need the value returned for each checkbox that are checked. so it should look like: "Canada, USA, Germany" if, for exemple, there is 3 checkbox that are checked.

Clicking on checkbox only shows one table row at a time (and doesn't remove row on deselecting)

I had a bit of code that was working. Basically I have a table with a checkbox next to each row and clicking on a checkbox added that particular row item to a separate div (i.e. it added that row item to a "Favorites List")

I implemented a named function surrounding the code in order to get a context menu working (that was to do the same thing as clicking on the checkbox). Not only is the context menu not working at all, but when clicking on a checkbox the Favorites div only displays one list item at a time. Also, the clicking on the same checkbox to remove a list item stopped working.

I shuffled some lines around but it just prevented the checkboxes from working entirely. I believe that the source of the problem is the named function, but I don't want to get rid of it because I do want to get the context menu working.

Checkbox creation:

function makeChx(evt) {
  if (evt.target.type !== "checkbox") {
    $(":checkbox", this).trigger("click");
  }
}

$("#km-table-id tbody tr").append($("<input />", {"type": "checkbox"}).addClass("checkbox-class")).on("click", makeChx)

Adding item to My Favorites div:

const $table = $("#km-table-id")
  let table = $table.DataTable();
  const favesArr = [];

  function faveFunc(evt) {

  let data = table.row(this.parentNode).data(),
  checked = $(this).is(":checked"),
  dataIndex = favesArr.indexOf(data);
  if (checked) {
    if (dataIndex === -1) {
      favesArr.push(data); // add item
    }
  } else {
    if (dataIndex > -1) {
      favesArr.splice(dataIndex, 1); // remove item
    }
  }  




for (var i = 0; i < favesArr.length; i++) {
    ($(".populate-faves").empty()); // removes all previous entries
    $(".populate-faves").append(JSON.stringify(favesArr[i].Titles) + '<br/> 
    <br/>').addClass("faved-doc");  
 }


   }; // ------------ faveFunc


   $(".checkbox-class").on("click", faveFunc)
   $("#add-id").on("click", faveFunc)

Context menu HTML:

<ul class="custom-menu">
        <li data-action="open">Open Document</li>
        <li id="add-id">Set As Favorite</li>
        <li data-action="email"><a href="mailto:?subject=subject">Email Document</a></li>
      </ul>

My Favorites div HTML:

<div id="myFave.hs-gc-header" class="faves-div">
    <p style="font-weight:bold">My Favorites:</p>
    <p class="populate-faves"></p>
</div>