event not trigger on first click parent Childs

Question

I am creating hierarchy relations list with parent Childs and sub-childs if i checked parent then all Childs with checked but i clicked on Childs then sub-childs will be checked. everything is working fine but its work on second click not working on first click. here is my fiddle example. fiddle link here http://jsfiddle.net/fahadsheikh/qdkwy0s7/8/

function changeCategoryStatus(_this, id) {

var main = document.querySelector(".main-checkbox"+id);
var children = document.querySelectorAll(".sub-checkbox"+id);

function toggleCheck() {

  var array=[];
  children.forEach(child => {
    if($(this).prop("checked") == true){
        child.checked = child.checked = true
    }
    else if($(this).prop("checked") == false){
        child.checked = child.checked = false
    }

    
    array.push(child.value);
    
  })

  return array;
}

if(main){
    main.addEventListener("click", toggleCheck);
}

//for sub-parent category

var sub_parent = document.querySelector(".sub-parent"+id);
var sub_children = document.querySelectorAll(".sub-checkbox"+id);

function toggleCheck() {

  var array=[];
  sub_children.forEach(child => {
    if($(this).prop("checked") == true){
        child.checked = child.checked = true
    }
    else if($(this).prop("checked") == false){
        child.checked = child.checked = false
    }

    
    array.push(child.value);
    
  })

  return array;
}

if(sub_parent){
    sub_parent.addEventListener("click", toggleCheck);
}

 
    var status = $(_this).prop('checked') == true ? 'active' : 'inactive';
    $.ajax({
        type: 'POST',
        url:"{{url('admin/categories-status')}}",
        data: {
            id: id,
            status: status,
            _token: "{{ csrf_token() }}"
        },
        success: function (result) {
        $("#status-success").show();
        $("#status-success").html(result.success);
        setTimeout(function() {
            $("#status-success").hide()
        }, 3000);
        }
    });

}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}


   
       second room 
                
                
                    
                    
                
                
                
                
                
                                                                                second-child room 
                    
                    
                        
                        
                    
                    
                    

                                                                                
                                                                    second subchild
                                    
                                    
                                        
                                        
                                    
                                    
                                    
                                                                                            
                                                                                                            
                
                                                                                
                third-room 
                
                
                    
                    
                
                
                
                
                
                                                                                third-child 
                    
                    
                        
                        
                    
                    
                    

                                                                                
                                                                    third-subchild

thanks for help.

user_519413 · Answer

The main issue with your current logic is that you are attaching the toggleCheck() function to the main checkbox every time the checkbox is clicked. This causes the odd behaviour you see.

Also note that your HTML is invalid. li elements must be children of the ul only, not div, and the ul itself cannot be a child of another ul. You need to structure your nested lists correctly. You can also improve the HTML by removing the incremental id and class attributes. They are an anti-pattern which leads to more complex code than necessary. Use DOM traversal to relate elements instead.

Regarding the JS code, you should avoid the use of the inline onclick event handlers as they are no longer good practice. Use unobtrusive event handlers added via your JS logic. Also you're redefining the toggleCheck() function numerous times, which is a big code smell.

With all that said, the HTML and JS can be massively simplified:

$('.sortable :checkbox').on('change', e => {
  let $cb = $(e.target);
  let isChecked = $cb.prop('checked');
  $cb.closest('li').find(':checkbox').prop('checked', isChecked);

  /* 
  // AJAX commented out for this demo only  
  $.ajax({
    type: 'POST',
    url: "{{url('admin/categories-status')}}",
    data: {
      id: $cb.prop('id'),
      status: isChecked ? 'active' : 'inactive',
      _token: "{{ csrf_token() }}"
    },
    success: function(result) {
      $("#status-success").html(result.success).show();
      
      setTimeout(function() {
        $("#status-success").hide();
      }, 3000);
    }
  });
  */
});

body {
  /* background-color: #20262E; */
  padding: 20px;
  font-family: Helvetica;
}

.move {
  display: inline-block;
}




  
    
      second room
      
        
          
          
        
      
      
        
      
      
        
          second-child room
          
            
              
              
            
          
          
            
          
          
            
              second subchild
              
                
                  
                  
                
              
              
            
          
        
      
    
  
  
    
      third-room
      
        
          
          
        
      
      
        
      
      
        
          third-child
          
            
              
              
            
          
          
            
          
          
            
              third-subchild

event not trigger on first click parent Childs

1 Answers