CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Abdul Rahman
Abdul Rahman

Reputation: 986

I want the program to execute when I click checkbox

I want this program to show alert when I click the Checkbox, But I am uable to do it, it is not working if i tried to do with checkbox, or it is show undefinied values. 

  <!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>

Upvotes: 0

Views: 75

Answers (6)

Tom O.
Tom O.

Reputation: 5941

This is one way to do it without using 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>

Upvotes: 0

Maxi
Maxi

Reputation: 1

I have done with checkbox and it's working fine. Here you can see:

$(document).ready(function(){
	$(".checkbox-alert").click(function(){
		var ele = $(this).parent().parent();
		ele.addClass('selected').siblings().removeClass('selected');   
		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);   
	});
});
    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>

Upvotes: 0

Kamal
Kamal

Reputation: 2640

This will get you the selected checkbox next td value, remember this code gives you current selected checkbox related value, if u need all, you can either push previous selected values in an array and can show the result or iterate through all selected checkboxes..

$('#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>

Upvotes: 0

G&#252;ney Saramalı
G&#252;ney Saramalı

Reputation: 799

I came up with an answer like this;

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>

JS

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

Working DEMO here

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

To make it work with checkbox use .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>

Upvotes: 1

Nisal Edu
Nisal Edu

Reputation: 7591

I found this on wed try following code

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

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

});

or to use .on() you just need to target the input that's getting clicked:

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

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

});

Upvotes: 0

Related Questions