CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
user6529916
user6529916

Reputation:

Check/Uncheck checkboxes

HTML:

<ol>
 <span>Select All<input id='selectall' type="checkbox" onclick='test(this.id);'>
    <ul>
      <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>3.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>4.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>5.<input type="checkbox" class='selectall'></span>
    </ul>
 </span>
</ol>

JS:

function test(clicked_id) {
    if ($("#" + clicked_id).prop("checked", true)) {
        $('#' + clicked_id + ' .' + clicked_id).prop('checked', true);
    } else {
        $('#' + clicked_id + ' .' + clicked_id).prop('checked', false);
    }
}

https://jsfiddle.net/j59eeqgu/

I want to select my main-checbox and to have the other checkboxes checked as well, but I am doing something wrong. When I try to select my main-checkbox, nothing happens.

Upvotes: 0

Views: 1098

Answers (5)

pleinx
pleinx

Reputation: 626

Here is an working Example. I also edited your Fiddle

$(document).on('click', '#selectall', function() {
  if($(this).is(':checked'))
	$(this).parent().find('input[type="checkbox"]').prop('checked', true);
  else
    $(this).parent().find('input[type="checkbox"]').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol>
  <span>Select All<input id='selectall' type="checkbox">
  <ul>
    <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>3.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>4.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>5.<input type="checkbox" class='selectall'></span>
  </ul>
  </span>
</ol>

EDIT: Update from Comment: 

$(document).ready(function() {
	var $selects = $('input[id^="select_"]');
	$selects.on('click', function() {
  	var $checkboxes = $(this).parent().find('input[type="checkbox"]');
    $checkboxes.prop('checked', this.checked);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol>
  <span>Select All<input id='select_0' type="checkbox">
  <ul>
    <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
  </ul>
  </span>
</ol>
<ol>

  <span>Select All<input id='select_1' type="checkbox">
  <ul>
    <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
  </ul>
</span>
</ol>

EDIT 2: Improve your HTML, you can save much of code and easier to handle. You can add more lists as you needed.

$(document).ready(function() {
	var $list = $('ul.my-whatever');
	var $selects = $list.find('li > input[type="checkbox"]');
  
	$selects.on('click', function() {
  	var $checkboxes = $(this).parent().find('input[type="checkbox"]');
    $checkboxes.prop('checked', this.checked);
  });
});
ul li {
  margin-bottom: 10px; 
}

ul ul li {
  margin: 0;
}

ul ul {
  list-style: decimal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="my-whatever">
  <li>
      Select All <input type="checkbox">
      <ul>
        <li>Something <input type="checkbox"></li>
        <li>Something <input type="checkbox"></li>
      </ul>
  </li>
  <li>
      Select All <input type="checkbox">
      <ul>
        <li>Something <input type="checkbox"></li>
        <li>Something <input type="checkbox"></li>
      </ul>
  </li>
  <li>
      Select All <input type="checkbox">
      <ul>
        <li>Something <input type="checkbox"></li>
        <li>Something <input type="checkbox"></li>
      </ul>
  </li>  
</ul>

Upvotes: 2

shishir
shishir

Reputation: 851

You may try using this jQuery script to add you checkAll function to your checkboxes.

HTML

<ol>
  Select All
  <input id='selectall' class="selectall" type="checkbox">
  <ul>
    1.<input type="checkbox" class='selectme'> 
    2.<input type="checkbox" class='selectme'> 
    3.<input type="checkbox" class='selectme'> 
    4.<input type="checkbox" class='selectme'> 
    5.<input type="checkbox" class='selectme'>
  </ul>
</ol>

jQuery

$(function() {
  $('.selectall').click(function() {
    $('.selectme').prop('checked', $(this).is(':checked'));
  });

  $('.selectme').click(function() {
    if ($('.selectme:checked').length == $('.selectme').length) {
      $('.selectall').prop('checked', true);
    } else {
      $('.selectall').prop('checked', false);
    }
  });
});

I have updated your class for input type="checkbox"

Fiddle

Upvotes: 0

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

Check that in your code you have span tags inside ul.. You better use ul, li and add CSS to display inline.. In that way you can clean your html.

To have all checkboxes checked you can add a click event handler function to your #selectall checkbox:

$('#selectall').on('click', function(){
  $('input:checkbox').prop('checked', this.checked);
});
ul {
  list-style-type: none;
  margin: 10px 0 0 0;
  padding: 0;
}

li {
  float: left;
  padding: 0 8px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input type="checkbox" id="selectall">
<ul>
  <li>1.<input type="checkbox"></li>
  <li>2.<input type="checkbox"></li>
  <li>3.<input type="checkbox"></li>
  <li>4.<input type="checkbox"></li>
  <li>5.<input type="checkbox"></li>
</ul>

Upvotes: 0

Jared Chu
Jared Chu

Reputation: 2852

$("#selectall").change(function() {
  var parentChecked = this.checked;
        $("input.selectall").each(function(){
         $(this).prop("checked",parentChecked);
        });
});

https://jsfiddle.net/j59eeqgu/7/

Upvotes: 0

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

You're using id for other check-boxes instead of class and use one liner this.checked rather then if condition, 

$('#selectall').click(function(){
 $('.selectall[type="checkbox"]').prop('checked', this.checked);
});

FYI, you should use li with ul

$('#selectall').click(function(){
 $('.selectall[type="checkbox"]').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <span>Select All<input id='selectall' type="checkbox">
            <ul>
        <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
        <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
        <span class='selectall'>3.<input type="checkbox" class='selectall'></span>
        <span class='selectall'>4.<input type="checkbox" class='selectall'></span>
        <span class='selectall'>5.<input type="checkbox" class='selectall'></span>
            </ul>
</span>

Upvotes: 2

Related Questions