我希望程序執行時，我點擊複選框

我想這個程序顯示警報，當我點擊複選框，但我可以做到這一點，它是行不通的，如果我試圖用複選框，或它是顯示未確定的價值。我希望程序執行時，我點擊複選框

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

來源

2017-10-13 VyTcdc

ü要在點擊一個動作或改變？ –

[出現爲我工作？]（https://jsfiddle.net/6gb9ts0g/）（即使你應該把事件放在複選框上而不是在行上） – Ivar

它是怎麼回事？你可以舉例 – VyTcdc

我想出了這樣的答案;

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

工作DEMO這裏

來源

2017-10-13 17:28:00

我發現這對結婚嘗試下面的代碼

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

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

});

或使用。對（），你只需要來定位是越來越點擊輸入：

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

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

});

來源

2017-10-13 17:22:05

要使它使用複選框使用.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>

來源

2017-10-13 17:23:05

非常感謝這個例子工作 – VyTcdc

沒問題，高興地幫助 –

這將讓你選擇旁邊的複選框TD值，記住這個代碼給你當前選中的複選框相關的值，如果你需要全部，你可以推動數組中的先前選定的值，並可以顯示結果或遍歷所有選定的複選框。

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

來源

2017-10-13 17:29:06 Kamal

這是爲了做到這一點，而無需使用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>

來源

2017-10-13 17:33:57 tommyO

我曾與複選框做，它的正常工作。在這裏你可以看到：

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

來源

2017-10-13 17:35:21 Maxi

我希望程序執行時，我點擊複選框

回答

相關問題