我希望程序在我单击复选框时执行

时间：2017-10-13 17:17:56

标签： javascript jquery html checkbox

我希望这个程序在我单击复选框时显示警告，但是我可以这样做，如果我尝试使用复选框，它就不起作用，或者它显示未确定的值。 

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

6 个答案:

答案 0 :(得分：1)

要使用复选框，请使用.closest("tr")

＆＃13;
＆＃13; 
$(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);
  });


});
＆＃13; 
td {
  border: 1px #DDD solid;
  padding: 5px;
  cursor: pointer;
}

.selected {
  background-color: brown;
  color: #FFF;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我在结婚时发现这个代码

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

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

});

或者使用.on（）你只需要定位被点击的输入：

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

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

});

答案 2 :(得分：0)

我想出了这样的答案;

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);
  });
});

在这里工作DEMO

答案 3 :(得分：0)

这将为您提供所选复选框的下一个td值，请记住此代码为您提供当前所选的复选框相关值，如果您需要全部，您可以按下数组中的先前选定值并显示结果或迭代所有选中复选框..

＆＃13;
＆＃13; 
$('#table input[type="checkbox"]').click(function(){
  if($(this).prop('checked')){
    alert($(this).closest('td').next().html());
  }
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

这是一种不使用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>

答案 5 :(得分：0)

我已经完成了复选框，它工作正常。在这里你可以看到：

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

相关问题
最新问题