Sooraj Chandran Sooraj Chandran - 7 months ago 7
HTML Question

Get selected text from Textbox adjacent to a selected checkbox

I have a table containing a checkbox , some text and a select box. The user will select a checkbox and then select a value in select box. I'm trying to find out if the user has selected a value in the select box corresponding to the checked checkboxes.

Following is my code:



$(document).ready(function() {
console.log("ready!");

$("#submit").click(function() {

$(".cb:checked").each(function() {
var cb = $(this);
console.log(cb.find('select option:selected').text());
if (cb.find('select option:selected').text() == "-") {
cb.find('select').css("border-color", "red");
}
})
});


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="cb" type="checkbox">
</td>
<td>some text</td>
<td>
<select>
<option>-</option>
<option>abc</option>
<option>def</option>
<option>ghi</option>
</select>
</td>
</tr>
</table>
<button id="submit">
Save
</button>





The selected text value always seems to be empty. What am I doing wrong ?

Answer

I have used closest() to get to the tr parent tag and then applied find to get to corresponding checkbox.

$(document).ready(function() {
  console.log("ready!");

  $("#submit").click(function(e) {

    $(".cb:checked").each(function() {
      var cb = $(this);
      console.log(cb.closest('tr').find('select option:selected').text());
      if (cb.closest('tr').find('select option:selected').text() == "-") {
        cb.closest('tr').find('select').css("border-color", "red");
      }
    })
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
       <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
    <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <input class="cb" type="checkbox">
    </td>
    <td>some text</td>
    <td>
      <select>
        <option>-</option>
        <option>abc</option>
        <option>def</option>
        <option>ghi</option>
      </select>
    </td>
  </tr>
</table>
<button id="submit">
  Save
</button>