Clever Geek Handbook

Multiple checkboxes with Select All

I modified an existing fiddle to get a comprehensive solution for multiple checkboxes with select / deselect. Now counts how many checkboxes are checked and also shows which checkboxes are checked . It looks like it works fine, but there are some things to fix and need to improve a little:

  • When you first check option A and then check the box "Select all", the system does not work.
  • The whole code looks a little longer. I think we can shorten the code a little, but I don't know how.
  • When we check all the parameters manually, the firstgroup checkbox should be automatically checked or otherwise, if any of the parameters are unchecked, the firstgroup checkbox should be unchecked automatically. And accordingly, the content of the div should change.

Thanks for any input.

<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form">Lorem ipsum</div>

    x = document.getElementById("result");
    y = document.getElementById("form");
    x.innerHTML = '';
    y.innerHTML = '';

$("#firstgroup").click(function() {
    var checkBoxes = $("input[type='checkbox'].order");
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
});


$("input[type='checkbox'].order").change(function() {
    var check       = $("input[type='checkbox'].order:checked").length;
var tnocb = $("input[type='checkbox'].order").length;
    var classes = $("input[type='checkbox'].order:checked").map(function() {
    return this.id;
}).get().join(", ");

if(check > 0) {
    if(check == 1) {
        x.innerHTML = 'Checked Checkbox: ' + classes + '<br>Total number of checked checkbox: ' + check;
    } else if(check == tnocb) {
        x.innerHTML = 'all of them are checked';
    } else {
        x.innerHTML = 'Checked Checkboxes: ' + classes + '<br>Total number of checked checkboxes: ' + check;
    }
    y.style.display = 'block';
    } else {
        x.innerHTML = '';
        y.style.display = 'none';
    }
    return false;
});
+3


source to share


5 answers 




$("#firstgroup").click(function() {
  $('#form').text('');
  $('#result').text('');
  $('input:checkbox').not(this).prop('checked', this.checked);
  if ($(".order:checked").length == 3) {
    $('#form').text('all of them are checked');
  }
});
$(".order").on('click', function() {
  var selectedItems = '';
  $('#result').text('');
  $('#form').text('');
  if ($(".order:checked").length == 3) {
    $('#form').text('all of them are checked');
    $("#firstgroup").prop('checked','checked');
  } else if ($(".order:checked").length > 0) {
    $("#firstgroup").prop('checked','');
    $(".order:checked").each(function(i, d) {
      selectedItems += d.id + ',';
    });
    $('#result').text('Checked Checkboxes: ' + selectedItems.substring(0, selectedItems.length - 1));
    $('#form').text('Total number of checked checkboxes: ' + $(".order:checked").length);
  }
});
      

        
        
        
      

    
<div style="margin-left: 20px;">
  <input type="checkbox" id="firstgroup" /> Select All<br>
  <input type="checkbox" class="order" id="first" /> A<br>
  <input type="checkbox" class="order" id="second" /> B<br>
  <input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
Run codeHide result


0


source


The first problem

$("#firstgroup").click(function() {
  var checkBoxes = $("input[type='checkbox'].order");
  checkBoxes.prop("checked", $("#firstgroup").prop("checked"));
});


Second problem I cannot fix.

0


source 


<div style="margin-left: 20px;">
<input type="checkbox" id="firstgroup" /> Select All<br>
<input type="checkbox" class="order" id="first" /> A<br>
<input type="checkbox" class="order" id="second" /> B<br>
<input type="checkbox" class="order" id="third" /> C
</div>
<div id="result"></div>
<div id="form">Lorem ipsum</div>
<script type="text/javascript">
    x = document.getElementById("result");
    y = document.getElementById("form");
    x.innerHTML = '';
    y.innerHTML = '';

$("#firstgroup").click(function() {
    var checkBoxes = $("input[type='checkbox'].order");
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    $('.order').not(this).prop('checked', this.checked);  //it will check and uncheck all checkbox
});


$("input[type='checkbox'].order").change(function() {
    var check       = $("input[type='checkbox'].order:checked").length;
var tnocb = $("input[type='checkbox'].order").length;
    var classes = $("input[type='checkbox'].order:checked").map(function() {
    return this.id;
}).get().join(", ");

if(check > 0) {
    if(check == 1) {
        x.innerHTML = 'Checked Checkbox: ' + classes + '<br>Total number of checked checkbox: ' + check;
    } else if(check == tnocb) {
        x.innerHTML = 'all of them are checked';
    } else {
        x.innerHTML = 'Checked Checkboxes: ' + classes + '<br>Total number of checked checkboxes: ' + check;
    }
    y.style.display = 'block';
    } else {
        x.innerHTML = '';
        y.style.display = 'none';
    }
    return false;
});
</script>
0


source 


$("#firstgroup").click(function () {
    if ($("#firstgroup[type='checkbox']:checked"));
    {
        $("#firstgroup").siblings("input[type='checkbox']").prop('checked', true);
    }
});

maybe this will help you.

0


source


I have updated several checkboxes with Select All code: http://jsfiddle.net/LUtJF/42/
Now you can

  • Get the number of checked boxes
  • Get checked checkbox labels
  • Receive message when all checkboxes are checked.
  • When all checkboxes are selected, the Select All checkbox is also checked automatically, or vice versa.
  • The system reacts. Whenever you add a new option, you don't need to change the code.

Thanks for your input and hope this latest version is helpful. Ahmet Arduk www.ahmath.com

<div style="margin-left: 20px;">
  <input type="checkbox" id="firstgroup" /> Select All<br>
  <input type="checkbox" class="order" id="first" /> A<br>
  <input type="checkbox" class="order" id="second" /> B<br>
  <input type="checkbox" class="order" id="third" /> C<br>
  <input type="checkbox" class="order" id="forth" /> D
</div>
<div id="result"></div>
<div id="form"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

$("#firstgroup").click(function() {
  $('#form').text('');
  $('#result').text('');
  $('input:checkbox').not(this).prop('checked', this.checked);
  if($(".order:checked").length == $(".order").length) {
        $('#form').text('all of them are checked');
  }
});
$(".order").on('click', function() {
  var selectedItems = '';
  $('#result').text('');
  $('#form').text('');
  if ($(".order:checked").length == $(".order").length) {
    $('#firstgroup').prop('checked', true);
    $('#form').text('all of them are checked');
  } else if ($(".order:checked").length > 0) {
    $('#firstgroup').prop('checked', false);
    $(".order:checked").each(function(i, d) {
      selectedItems += d.id + ',';
    });
    $('#result').text('Checked Checkboxes: ' + selectedItems.substring(0, selectedItems.length - 1));
    $('#form').text('Total number of checked checkboxes: ' + $(".order:checked").length);
  }
});
0


source






More articles:


All Articles