Mark checkbox if user type in input text in a table

Navigation
4

I need when the user types in an input text, the checkbox of the respective table line should be checked, and if the user leaves the input text again in blank, the checkbox unchecks. Here is the code: 

<table class="table table-striped" id="produtostab">
    <thead>
        <tr>
            <th>Quantidade</th>
            <th>Selecionar</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input class="inputq1" name="inputquant" type="text" />
            </td>
            <td>
                <input type="checkbox" name="checkboxvar">
            </td>
        </tr>
        <tr>
            <td>
                <input class="inputq1" name="inputquant[]" type="text" />
            </td>
            <td>
                <input type="checkbox" name="checkboxvar[]">
            </td>
        </tr>
    </tbody>
</table>
<button id="add" class="btn btn-default">Adicionar</button>

Fiddle

As you can see, it will be a table with multiple lines, so it is no use for the user to write in a input and to mark all checkbox , it is necessary to < s are filled in . I believe this should be done with JavaScript, but how?

This is PHP that creates HTML: 

<?php
$conn = new mysqli('localhost', 'root', '', 'sindigrejinha') or die('Falha ao conectar-se com DB');
mysqli_query($conn, "SET NAMES 'UTF8'") or die("ERROR: " . mysqli_error($con));
$result = $conn -> query("select idProduto, Descricao from produto");
while ($row = $result -> fetch_assoc()) {
    unset($idProduto, $Descricao);
    $idProduto = $row['idProduto'];
    $Descricao = $row['Descricao'];
    echo '<tr>';
    echo '<td>' . $Descricao . '</td>';
    echo '<td><input name="inputquant[]" type="text" /></td>';
    echo '<td><input type="checkbox" value="'. $idProduto .'" name="checkboxvar[]"></td>';
    echo '</tr>';
}
?>
    
asked by anonymous 27.08.2014 / 18:45

4 answers

5

I suggest slightly adapting your HTML, including a class (say: CaixaMagica ) in each text box and a class in each checkbox. Your HTML will look like this: 

<table>
    <tr>
        <td>
            <input class="CaixaMagica" name="inputquant" type="text" />
        </td>
        <td>
            <input class="CheckboxMagico" type="checkbox" value="idProduto" name="checkboxvar" />
        </td>
    </tr>
    <tr>
        <td>
            <input class="CaixaMagica" name="inputquant" type="text" />
        </td>
        <td>
            <input class="CheckboxMagico" type="checkbox" value="idProduto" name="checkboxvar" />
        </td>
    </tr>
</table>

After this, just use this code: 

$(function(){
    $(".CaixaMagica").keyup(function(){
        if($(this).val().length > 0){
            $(this).parent().parent().find(".CheckboxMagico").prop("checked", true);
        } else {
            $(this).parent().parent().find(".CheckboxMagico").prop("checked", false);
        }
    });
});

Edit: I forgot about JSFiddle that I prepared .

    
27.08.2014 / 19:12
2

I think this is the way to practice understanding 

$( "#input-a-monitorar" ).keyup(function() {
  $('.myCheckbox').prop('checked', true);
  $('.myCheckbox').prop('checked', false);
});

I am available for more information

    
27.08.2014 / 18:57
1
<input class="input" name="inputquant" type="text" />

Putting a class into the text input, js would look like this: 

$(function(){
    $(".input").keyup(function(){
        if($(this).val()){
            $("input[type=checkbox]",$(this).parents("tr")).attr("checked", "checked");
        } else {
            $("input[type=checkbox]",$(this).parents("tr")).removeAttr("checked");
        }
    });
});

I hope this can help.

    
27.08.2014 / 19:40
0

As I understand it, you want it when you enter an amount for a product, the checkbox stores the ID of this product so that you can later reference which product was entered in the quantity.

If it is, I advise a small modification that will work more optimally in your script PHP, at the moment it will retrieve the data.

When you assemble your HTML, make this change: 

while ($row = $result -> fetch_assoc()) {
    unset($idProduto, $Descricao);
    $idProduto = $row['idProduto'];
    $Descricao = $row['Descricao'];
    echo '<tr>';
    echo '<td>' . $Descricao . '</td>';
    echo '<td><input name="inputquant['.$idProduto.']" type="text" /></td>';
    echo '<td><input type="checkbox" value="'. $idProduto .'" name="checkboxvar[]"></td>';
    echo '</tr>';
}

The difference is in the name="inputquant['.$idProduto.']" excerpt, so you access the quantity of a product using the product ID as the index of the array.

As the problem has been developed, the checkbox is being a quantity field monitor, so I make this suggestion. Even if you check the checkbox without having filled anything in the input , you will pass wrong information to the script in>.

    
27.08.2014 / 19:43
How to force the '.on (' input ') method via script? Time access restriction with php