CODEWITHSUNDEEP
jquerycheckbox
mohsin
mohsin

Reputation: 123

How to get Checked check boxes length

Trying to get checked check boxes length but getting 0 while they are all checked.

I have a table and it's row's containing td's of check boxes. Each input type checkbox has class name " check ".

Having master checkbox outside the table and that is responsible for select/Deselect all check boxes inside the table.

Now I want to see if at least one check box is checked by clicking button.

var allCheckBoxes = $('.check :checkbox:checked');
console.log(allCheckBoxes.length);

It's getting nothing but zero :(

            <table id="checkboxTable" class="table table-bordered">
            <tbody>
                <tr>
                    <th>Table name</th>
                    <th>Gen A</th>
                    <th>Gen B</th>
                    <th>Actions</th>
                </tr>

            @foreach($data as $k => $table)
            <tr class="trcheck" id="{{$table}}">
                <td>{{$table}}</td>
                <td><input type="checkbox" name="{{$table}}[]" value="controller" class="check"></td>
                <td><input type="checkbox" name="{{$table}}[]" value="model" class="check"></td>
                <td>
                    <button onclick="checkbox_gen_object(this);" id="{{'genbtn'.$i}}" class="genSingle btn btn-primary">
                        Generate
                    </button>
                </td>

            </tr>

            @endforeach

        </tbody>
    </table>

Upvotes: 1

Views: 266

Answers (2)

Ricky
Ricky

Reputation: 498

function myfunction(){
var mylength=$(".a").filter(':checked').length;
alert(mylength);
$("#leng").val(mylength);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  
  length: <input type="text" id="leng" name="user"><br>
  I have a bike: <input type="checkbox" class="a" name="vehicle" value="Bike"><br>
  I have a car: <input type="checkbox" class="a" name="vehicle" value="Car"><br>
  I have an airplane: <input type="checkbox" class="a" name="vehicle" value="Airplane"><br>
  <input id="btn" onclick="myfunction()" type="button" value="test">

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

You need to remove the space in $('.check :checkbox:checked') since your object with the class check is your checkbox;

You also don't need the :checkbox selector, just use $('.check:checked').length

Working demo

function checkbox_gen_object(obj){
  console.log($('.check:checked').length)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="checkboxTable" class="table table-bordered">
  <tbody>
    <tr>
      <th>Table name</th>
      <th>Gen A</th>
      <th>Gen B</th>
      <th>Actions</th>
    </tr>

    <tr class="trcheck" id="{{$table}}">
      <td>{{$table}}</td>
      <td><input type="checkbox" name="{{$table}}[]" value="controller" class="check"></td>
      <td><input type="checkbox" name="{{$table}}[]" value="model" class="check"></td>
      <td>
        <button onclick="checkbox_gen_object(this);" id="{{'genbtn'.$i}}" class="genSingle btn btn-primary">
                        Generate
                    </button>
      </td>

    </tr>

    <tr class="trcheck" id="{{$table}}">
      <td>{{$table}}</td>
      <td><input type="checkbox" name="{{$table}}[]" value="controller" class="check"></td>
      <td><input type="checkbox" name="{{$table}}[]" value="model" class="check"></td>
      <td>
        <button onclick="checkbox_gen_object(this);" id="{{'genbtn'.$i}}" class="genSingle btn btn-primary">
                        Generate
                    </button>
      </td>

    </tr>

  </tbody>
</table>

Upvotes: 0

Related Questions