jQuery - Count inputs in table row

Question

I am trying to use jQuery to detect if a table row has one or two inputs...

<tr class="myoptions">
    <td class="label">
        <label>
            <strong>Options</strong>
        </label>
    </td>
    <td class="value">
        <div>
            <input type="radio" value="test1">
            <label>
                test1
            </label>
        </div>
        <div>
            <input type="radio" value="test1">
            <label>
                test1
            </label>
        </div>
    </td>
</tr>

How can I count the inputs inside this tr? Does anybody have an example I can see?

$(".value input").length ?

Louys Patrice Bessette
– Louys Patrice Bessette

2018-01-24 22:15:32 +00:00
Commented Jan 24, 2018 at 22:15 — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Jan 24, 2018 at 22:15

Roko C. Buljan · Accepted Answer · 2018-01-24 22:25:55Z

var numberOfInputs = $(".myoptions").find("input").length

var numberOfInputs = $(".myoptions").find("input").length;

console.log(numberOfInputs);

if (numberOfInputs < 1) {
  console.log("No input");
} else if (numberOfInputs === 1) {
  console.log("One input");
} else if (numberOfInputs === 2) {
  console.log("Two inputs");
} else {
  console.log("More than two inputs");
}

<table>
  <tr class="myoptions">
    <td class="label">
      <label>
            <strong>Options</strong>
        </label>
    </td>
    <td class="value">
      <div>
        <input type="radio" value="test1">
        <label>
                test1
            </label>
      </div>
      <div>
        <input type="radio" value="test1">
        <label>
                test1
            </label>
      </div>
    </td>
  </tr>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

One important thing to notice is that you absolutely need a <table> element parent since you use <tr>, otherwise the browser will wipe out your <tr> elements from the DOM - making them unreachable.

Louys Patrice Bessette · Accepted Answer · 2018-01-24 22:22:35Z

Lookup for the inputs in the row class .value... Which is a strange class name, by the way. Can be confusing...

Then .length property will tell you how many there is in the collection.

console.log( $(".value input").length );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr class="myoptions">
    <td class="label">
        <label>
            <strong>Options</strong>
        </label>
    </td>
    <td class="value">
        <div>
            <input type="radio" value="test1">
            <label>
                test1
            </label>
        </div>
        <div>
            <input type="radio" value="test1">
            <label>
                test1
            </label>
        </div>
    </td>
  </tr>
</table>

Collectives™ on Stack Overflow

jQuery - Count inputs in table row

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related