Create one tick box then automatically ticked all other tick boxes with one click and also shows a button

Question

So, I am trying to create a tick box that has this action:

The chkAll box , once been ticked, all other check boxes will also ticked.
When this action happens, a button will appear.

Then, another action I am trying to achieve is, if two or more checkboxes (not included the chkAll box is ticked, the same button will appear too. This button is like a zip file button, so, only if more than one check box is ticked, it will appear (enabled to be used).

Currently the error I am facing is, 1.the chkAll check box needs to double click only then, the button appear.

2.And when I unclicked the chkAll check box, the button does disappear, but the other chckboxes are still ticked, which they suppose to be unticked too.

3.And when more than 1 check boxes are ticked, the button does not appear.

I am new to php, jquery, so will really appreciate any guidance from you. Thank you.

function toggleTick_Change() {
  $('input[type=checkbox]').change(function() {
    if ($("#chkAll").prop("checked")) {
      $('input[type=checkbox]').prop('checked', $(this).prop("checked"));
      $("#conditional-part").show();
    } else if ($("#chkT").prop("checked")) {
      if ($("#chkT").length > 1) {
        $("#conditional-part").show();
      } else {
        $("#conditional-part").hide();
      }
    } else {
      $("#conditional-part").hide();
    }

  });
}

#conditional-part {
  display: none;
}



  

    

      
        Manage Deliveries
      
      
        
          
            
              

              
                                
                            
            
          
        

        
          
            
              
                
                  
                
                
                  #
                
                
                  DELIVERY NO / 
DATE / TYPE
                
              
            
            
              
                
                  
                
                
                  abcd
                
              
              
                
                  
                
                
                  1234

user_2813224 · Answer

Two things you should be aware of:

#id should be used sparingly (preferably not at all), I have changed all #id to classes (with the exception of the ugly button and input). The frequent use of #id will hinder if not cripple your code in the future. This is especially true if you use jQuery.
onEvent attribute handlers are discouraged as well especially if you use jQuery.

$(document).ready(function() {
  $(".chkAll").on('change', function(event) {
    if ($(this).is(":checked")) {
      $('.chkT').prop('checked', true);
      $(".conditional-part").show();
    } else {
      $('.chkT').prop('checked', false);
      $(".conditional-part").hide();
    }
  });
});

.conditional-part {
  display: none;
}


  

    

      
        Manage Deliveries
      
      
        
          
            
              

              
                                
                            
            
          
        

        
          
            
              
                
                  
                
                
                  #
                
                
                  DELIVERY NO / 
DATE / TYPE
                
              
            
            
              
                
                  
                
                
                  abcd
                
              
              
                
                  
                
                
                  1234

user_10805479 · Answer

 function toggleTick_Change(e) {
          if(e.checked){
          $('.chkBox').prop('checked',true);
     $("#conditional-part").show();
          }else{
          $('.chkBox').prop('checked',false);
    $("#conditional-part").hide();
          }
    }
 

$('.chkBox').click(function() {
    if ($('.chkBox:checked').length == $('.chkBox').length) {
      $('#chkAll').prop('checked', true);
$("#conditional-part").show();
    } else {
      $('#chkAll').prop('checked', false);
$("#conditional-part").hide();
    }
  });

#conditional-part {
  display: none;
}

    
    
      

        

          
            Manage Deliveries
          
          
            
              
                
                  

                  
                                    
                                
                
              
            

            
              
                
                  
                    
                      
                    
                    
                      #
                    
                    
                      DELIVERY NO / 
DATE / TYPE
                    
                  
                
                
                  
                    
                      
                    
                    
                      abcd
                    
                  
                  
                    
                      
                    
                    
                      1234

user_6091308 · Answer

So this is mostly due to you triggering the change twice. once in line when a user selects it, Then again when you run your on change function.

Just add a class of .js-checkbox to your checkbox's and remove the onchange.

$('.js-checkbox').change(function() {
  if ($(this).attr('id') === 'chkAll') {
    if ($(this).prop('checked') === true) {
      $('.js-checkbox').prop('checked', true);
    } else {
      $('.js-checkbox').prop('checked', false);
    }
  }
  
  const checked = $('.js-checkbox:checked');
  
  if (checked.length >= 2) {
    $('#conditional-part').show();
  } else {
    $('#conditional-part').hide();
  }
})

html in case you did not remove the onchange.


  

    

      
        Manage Deliveries
      
      
        
          
            
              

              
                                
                            
            
          
        

        
          
            
              
                
                  
                
                
                  #
                
                
                  DELIVERY NO / 
DATE / TYPE
                
              
            
            
              
                
                  
                
                
                  abcd
                
              
              
                
                  
                
                
                  1234

user_10669010 · Answer

the JS way...

const
  myForm = document.querySelector('#my-form')
, chkbxN = myForm.querySelectorAll('input[type="checkbox"]:not([name="All"])')
  ;
myForm.onsubmit = e => e.preventDefault()  // disable  form submit
 
myForm.oninput = ({target}) =>
  {
  if (target.name==='All')
    chkbxN.forEach(cb => cb.checked = myForm.All.checked)

  let CheckedBoxes = [...chkbxN].reduce((arr,cb)=>
    {
    if (cb.checked) arr.push(cb.name)
    return arr
    },[])

  myForm.All.checked       = ( CheckedBoxes.length === chkbxN.length ) 
//myForm.All.indeterminate = ( 0 < CheckedBoxes.length && CheckedBoxes.length < chkbxN.length )

  myForm.theButton.classList.toggle('noDisplay',(CheckedBoxes.length  < 2))

  console.clear()
  console.log( JSON.stringify(CheckedBoxes))
  }

label      { display : block; }
.noDisplay { display : none;  }
#my-form > p {
  height     : 2.2em;
  background : #a9bccf;
  padding    : .3em;
  }


  
    
  

   All   
   Car   
   House 
   nice  
   Beach

user_4839724 · Answer

I'll have to admit, my jQuery is pretty rusty. So, I did this with vanilla JS.

As was mentioned before, there are two checkboxes with the same id. The id attribute needs to be unique for any element that uses one. So I changed chkT to a class.

I also changed the CSS property from display: none; to visibility: hidden so that the table doesn't jump around so much when it is shown/hidden. I added a class called .show and the property visibility: visible!important and then just add/remove that class as the different conditions are met.

I also removed the onchange attribute from the checkboxes and added the event listeners in the javascript.

Hopefully, this helps and didn't confuse you further. JQuery is an oaky tool, however, I would really recommend that you try and learn more of the vanilla Javascript methods to build a good JS foundation.

function toggleTick_Change(event) {
  const chkAll = document.querySelector(`#chkAll`);
  const chkT = document.querySelectorAll(`.chkT`);
  const condPart = document.querySelector(`#conditional-part`);

  if (event.target.id === `chkAll`) chkT.forEach(n => n.checked = event.target.checked);

  const ckTCheckedCount = document.querySelectorAll(`.chkT:checked`).length

  if (ckTCheckedCount === 0) {
    chkAll.checked = false;
    chkAll.indeterminate = false;
  } else if (chkT.length === ckTCheckedCount) {
    chkAll.checked = true;
    chkAll.indeterminate = false;
  } else {
    chkAll.checked = false;
    chkAll.indeterminate = true;
  }

  ckTCheckedCount > 1 ? condPart.classList.add(`show`) : condPart.classList.remove(`show`);
}

document.querySelectorAll(`input[type=checkbox]`)
  .forEach(node => node.addEventListener(`click`, event => toggleTick_Change(event)));

#conditional-part {
  visibility: hidden;
}

.show {
  visibility: visible!important;
}




  

    

      
        Manage Deliveries
      
      
        
          
            
              

              
                                
                            
            
          
        

        
          
            
              
                
                  
                
                
                  #
                
                
                  DELIVERY NO / 
DATE / TYPE
                
              
            
            
              
                
                  
                
                
                  abcd
                
                
              
              
                
                  
                
                
                  1234

Create one tick box then automatically ticked all other tick boxes with one click and also shows a button

5 Answers