Флажок — как получить данные в строке, если флажок в строке установлен?

#javascript #jquery #html #checkbox #html-table

#javascript #jquery #HTML #флажок #html-таблица

Вопрос:

Я хочу составить список лекарств и проверить все лекарства, которые я хочу купить. Я подумал об использовании флажка для проверки всех лекарств, которые я хочу заказать, а затем перенести название лекарства в Javascript после нажатия кнопки заказа.

Я совсем новичок в Javascript и jQuery, поэтому я не уверен, как заставить это работать. Я искал другие коды, но не могу найти ни одного, который мог бы быть связан с моей проблемой.

Вот код таблицы, который я сделал:

  <table id="example1" >
    <thead>
        <tr>
            <th></th>
            <th>Brand Name</th>
            <th>Medicine Name </th>
            <th>Price</th>


        </tr>
    </thead>
    <tbody>


        <tr>
            <td style="width: 5px"><input type="checkbox" /></td>                                               
            <td>Xeloda</td>
            <td> Capecitabine</td>
            <td>$150 </td>
        </tr>
        <tr>
            <td style="width: 5px"><input type="checkbox" /></td>                                               
            <td>Camptosar</td>
            <td>Irinotecan Hydrochloride</td>
            <td>$200 </td>
        </tr>
        <tr>
            <td style="width: 5px"><input type="checkbox" /></td>                                               
            <td>Eloxatin</td>
            <td>Oxaliplatin</td>
            <td>$150 </td>
        </tr>




</table>
<input type="button" value="order" onclick="getAllMedicineNameOfCheckedBox()"/>
 

Ответ №1:

 $(":checked").closest("tr").children("td").get()
 

вернет массив всех элементов td в строке. Вам нужно будет выполнить дополнительный код для обработки нескольких флажков и т. Д. И, Возможно, привязать его к обработчикам щелчков.

 $("input:checkbox").on("click", function(){
  if ($(this).is(":checked")){
      var data = $(this).closest("tr").children("td").get();

      /*  loop over TD items.  */
  } 
});