Je veux que le programme s'exécute quand je clique sur la case

Je veux que ce programme apparaisse alerte quand je clique sur la case, mais je suis capable de le faire, ça ne marche pas si j'ai essayé de faire avec la case à cocher, ou c'est show valeurs indéfinies.Je veux que le programme s'exécute quand je clique sur la case

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <style> 
    td {border: 1px #DDD solid; padding: 5px; cursor: pointer;} 

    .selected { 
     background-color: brown; 
     color: #FFF; 
    } 


    </style> 

    <script> 
     $(document).ready(function(){ 

     $("#table tr").click(function() 
     { 

     $(this).addClass('selected').siblings().removeClass('selected'); 
     var value1=$(this).find('td:nth-child(2)').html(); 
     var value2=$(this).find('td:nth-child(3)').html(); 
     var value3=$(this).find('td:nth-child(5)').html(); 
     alert(value1+" "+value2+" "+value3); 
    }); 


    }); 


    </script> 
    </head> 
    <body> 

    <table id="table" border="1"> 
     <tr> 
     <label for="check"> 
      <td><input type="checkbox" id="check"></td> 
      <td>Pizza</td> 
      <td>1000$</td> 
      <td>1200$</td> 
      <td>Vegetable Pizza</td> 
      <td>1</td> 
      <td>F138</td> 
      <td>Klik pre detaily</td> 
      </label> 
     </tr> 
     <tr> 
      <td><input type="checkbox" id="check"></td> 
      <td>Burger</td> 
      <td>1000$</td> 
      <td>1200$</td> 
      <td>HOT Sanwidtch Burger</td> 
      <td>1</td> 
      <td>F138</td> 
      <td>Klik pre detaily</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" id="check"></td> 
      <td>KFC Chicken</td> 
      <td>1000$</td> 
      <td>1200$</td> 
      <td>Spicy Hot Chicken</td> 
      <td>1</td> 
      <td>F138</td> 
      <td>Klik pre detaily</td> 
     </tr> 

    </table> 

    </body> 
    </html>

Source

2017-10-13 VyTcdc

u veulent une action sur clic ou changer ?? –

[Apparaît pour travailler pour moi?] (Https://jsfiddle.net/6gb9ts0g/) (Même si vous devez mettre l'événement sur la case à cocher et non sur la ligne) – Ivar

comment c'est? pourriez-vous donner un exemple – VyTcdc

J'ai trouvé une réponse comme celle-ci;

HTML

<table id="table" border="1"> 
     <tr> 
     <label for="check"> 
      <td><input type="checkbox" class="check"></td> 
      <td>Pizza</td> 
      <td>1000$</td> 
      <td>1200$</td> 
      <td>Vegetable Pizza</td> 
      <td>1</td> 
      <td>F138</td> 
      <td>Klik pre detaily</td> 
      </label> 
     </tr> 
     <tr> 
      <td><input type="checkbox" class="check"></td> 
      <td>Burger</td> 
      <td>1000$</td> 
      <td>1200$</td> 
      <td>HOT Sanwidtch Burger</td> 
      <td>1</td> 
      <td>F138</td> 
      <td>Klik pre detaily</td> 
     </tr> 
     <tr> 
      <td><input type="checkbox" class="check"></td> 
      <td>KFC Chicken</td> 
      <td>1000$</td> 
      <td>1200$</td> 
      <td>Spicy Hot Chicken</td> 
      <td>1</td> 
      <td>F138</td> 
      <td>Klik pre detaily</td> 
     </tr> 

    </table>

$(document).ready(function(){ 
    $('.check').click(function(){ 
    var x = $(this).parents('tr').text(); 
    alert(x); 
    }); 
});

travail DEMO ici

Source

2017-10-13 17:28:00

Je trouve cela sur essayer wed code suivant

$('#CheckBoxList input[type=checkbox]').change(function() { 

    var id = $(this).val(); // this gives me null 
    if (id != null) { 
    //do other things 
    } 

});

ou utiliser .on(), vous avez juste besoin de cibler l'entrée qui devient cliqué:

$('#CheckBoxList').on('change', 'input[type=checkbox]', function() { 

    var id = $(this).val(); // this gives me null 
    if (id != null) { 
    //do other things 
    } 

});

Source

2017-10-13 17:22:05

Pour faire travailler avec la case à cocher utiliser .closest("tr")

$(document).ready(function() { 
 

 
    $("#table tr input[type=checkbox]").click(function() { 
 

 
    $(this).addClass('selected').siblings().removeClass('selected'); 
 
    var value1 = $(this).closest("tr").find('td:nth-child(2)').html(); 
 
    var value2 = $(this).closest("tr").find('td:nth-child(3)').html(); 
 
    var value3 = $(this).closest("tr").find('td:nth-child(5)').html(); 
 
    alert(value1 + " " + value2 + " " + value3); 
 
    }); 
 

 

 
});

td { 
 
    border: 1px #DDD solid; 
 
    padding: 5px; 
 
    cursor: pointer; 
 
} 
 

 
.selected { 
 
    background-color: brown; 
 
    color: #FFF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table" border="1"> 
 
    <tr> 
 
    <label for="check"> 
 
      <td><input type="checkbox" id="check" /></td> 
 
      <td>Pizza</td> 
 
      <td>1000$</td> 
 
      <td>1200$</td> 
 
      <td>Vegetable Pizza</td> 
 
      <td>1</td> 
 
      <td>F138</td> 
 
      <td>Klik pre detaily</td> 
 
      </label> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="checkbox" id="check"></td> 
 
    <td>Burger</td> 
 
    <td>1000$</td> 
 
    <td>1200$</td> 
 
    <td>HOT Sanwidtch Burger</td> 
 
    <td>1</td> 
 
    <td>F138</td> 
 
    <td>Klik pre detaily</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="checkbox" id="check"></td> 
 
    <td>KFC Chicken</td> 
 
    <td>1000$</td> 
 
    <td>1200$</td> 
 
    <td>Spicy Hot Chicken</td> 
 
    <td>1</td> 
 
    <td>F138</td> 
 
    <td>Klik pre detaily</td> 
 
    </tr> 
 

 
</table>

Source

2017-10-13 17:23:05

Merci beaucoup Cet exemple fonctionne – VyTcdc

pas de problème, heureux d'aider –

Cela vous obtenir la case suivante sélectionnée valeur td, rappelez-vous ce code vous donne la valeur liée au cours de case à cocher sélectionnée, si Vous avez besoin de tout, vous pouvez soit pousser les valeurs sélectionnées précédentes dans un tableau et afficher le résultat, soit parcourir toutes les cases cochées.

$('#table input[type="checkbox"]').click(function(){ 
 
    if($(this).prop('checked')){ 
 
    alert($(this).closest('td').next().html()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table" border="1"> 
 
     <tr> 
 
     <label for="check"> 
 
      <td><input type="checkbox" id="check"></td> 
 
      <td>Pizza</td> 
 
      <td>1000$</td> 
 
      <td>1200$</td> 
 
      <td>Vegetable Pizza</td> 
 
      <td>1</td> 
 
      <td>F138</td> 
 
      <td>Klik pre detaily</td> 
 
      </label> 
 
     </tr> 
 
     <tr> 
 
      <td><input type="checkbox" id="check"></td> 
 
      <td>Burger</td> 
 
      <td>1000$</td> 
 
      <td>1200$</td> 
 
      <td>HOT Sanwidtch Burger</td> 
 
      <td>1</td> 
 
      <td>F138</td> 
 
      <td>Klik pre detaily</td> 
 
     </tr> 
 
     <tr> 
 
      <td><input type="checkbox" id="check"></td> 
 
      <td>KFC Chicken</td> 
 
      <td>1000$</td> 
 
      <td>1200$</td> 
 
      <td>Spicy Hot Chicken</td> 
 
      <td>1</td> 
 
      <td>F138</td> 
 
      <td>Klik pre detaily</td> 
 
     </tr> 
 

 
    </table>

Source

2017-10-13 17:29:06 Kamal

C'est une façon de le faire sans utiliser jQuery.

var checks = document.querySelectorAll('.check'); 
 

 
checks.forEach(function(element) { 
 
    //console.log(element); 
 
    element.addEventListener('change', function() { 
 
    //console.log(); 
 
    if (this.checked) { 
 
     alert(this.dataset['food']); 
 
    } 
 
    }); 
 
});

<table id="table" border="1"> 
 
    <tr> 
 
    <td><label for="check"></label><input type="checkbox" class="check" data-food="Pizza" /></td> 
 
    <td>Pizza</td> 
 
    <td>1000$</td> 
 
    <td>1200$</td> 
 
    <td>Vegetable Pizza</td> 
 
    <td>1</td> 
 
    <td>F138</td> 
 
    <td>Klik pre detaily</td> 
 

 
    </tr> 
 
    <tr> 
 
    <td><input type="checkbox" class="check" data-food="Burger"></td> 
 
    <td>Burger</td> 
 
    <td>1000$</td> 
 
    <td>1200$</td> 
 
    <td>HOT Sanwidtch Burger</td> 
 
    <td>1</td> 
 
    <td>F138</td> 
 
    <td>Klik pre detaily</td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="checkbox" class="check" data-food="KFC Chicken"></td> 
 
    <td>KFC Chicken</td> 
 
    <td>1000$</td> 
 
    <td>1200$</td> 
 
    <td>Spicy Hot Chicken</td> 
 
    <td>1</td> 
 
    <td>F138</td> 
 
    <td>Klik pre detaily</td> 
 
    </tr> 
 

 
</table>

Source

2017-10-13 17:33:57 tommyO

Je l'ai fait avec case à cocher et cela fonctionne très bien. Ici vous pouvez voir:

$(document).ready(function(){ 
 
\t $(".checkbox-alert").click(function(){ 
 
\t \t var ele = $(this).parent().parent(); 
 
\t \t ele.addClass('selected').siblings().removeClass('selected'); 
 
\t \t var value1=ele.find('td:nth-child(2)').html(); 
 
    var value2=ele.find('td:nth-child(3)').html(); 
 
    var value3=ele.find('td:nth-child(5)').html(); 
 
    alert(value1+" "+value2+" "+value3); 
 
\t }); 
 
});

td {border: 1px #DDD solid; padding: 5px; cursor: pointer;} 
 

 
    .selected { 
 
     background-color: brown; 
 
     color: #FFF; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table" border="1"> 
 
     <tr> 
 
     <label for="check"> 
 
      <td><input class="checkbox-alert" type="checkbox" id="check"></td> 
 
      <td>Pizza</td> 
 
      <td>1000$</td> 
 
      <td>1200$</td> 
 
      <td>Vegetable Pizza</td> 
 
      <td>1</td> 
 
      <td>F138</td> 
 
      <td>Klik pre detaily</td> 
 
      </label> 
 
     </tr> 
 
     <tr> 
 
      <td><input class="checkbox-alert" type="checkbox" id="check2"></td> 
 
      <td>Burger</td> 
 
      <td>1000$</td> 
 
      <td>1200$</td> 
 
      <td>HOT Sanwidtch Burger</td> 
 
      <td>1</td> 
 
      <td>F138</td> 
 
      <td>Klik pre detaily</td> 
 
     </tr> 
 
     <tr> 
 
      <td><input class="checkbox-alert" type="checkbox" id="check3"></td> 
 
      <td>KFC Chicken</td> 
 
      <td>1000$</td> 
 
      <td>1200$</td> 
 
      <td>Spicy Hot Chicken</td> 
 
      <td>1</td> 
 
      <td>F138</td> 
 
      <td>Klik pre detaily</td> 
 
     </tr> 
 

 
    </table>

Source

2017-10-13 17:35:21 Maxi

Je veux que le programme s'exécute quand je clique sur la case

Répondre

Questions connexes