자바스크립트 여러 복잡한 조건을 적용한 체크박스 마음대로 다뤄보기

공정을 체크하는 체크박스를 클릭하면 일어나는 일들을 작업하고 있다.

여러가지 조건들.. 그것들을 만족하는 코드....

1) 코드에서 button을 checkbox를 toggle하도록 코드 수정

$(document).ready(function() {
  var values = [];
  $('.form-check-input').each(function() {
    var val = $(this).val();
    if (val && val !== '전체적용' && val !== '' && val !== 'on') {
      val = val.replace(/_.*/, '');
      if (values.indexOf(val) === -1) {
        values.push(val);
      }
    }
  });
  if (values.length > 0) {
    for (var i = 0; i < values.length; i++) {
      var text = values[i] + ' check 전체';
      var newButton = $('<button>').addClass('btn btn-outline-success mr-2 mb-2').text(text);
      $('.button-container').append(newButton);
      newButton.on('click', function(event) {
        event.preventDefault();

        var value = $(this).text().split(' ')[0];
        $('.form-check-input').each(function() {
          if ($(this).val().startsWith(value)) {
            $(this).prop('checked', function(index, checked) {
              return !checked;
            });
          }
        });
        
        const checkboxes = document.querySelectorAll('input[name="checkbox[]"]');
        const checkedValues = Array.from(checkboxes).filter(c => c.checked).map(c => c.value);
        console.log(checkedValues); // 선택된 체크박스 값 출력
        $("#workboard_arrCheck").val(checkedValues);
      });
    }  
  }
});

2) 위의 코드에서 'check 전체' 버튼이 들어있는 버튼을 클릭하면 해당 values는 전체 체크가 되고, 한번 더 누르면 해당 values가 전체 체크 해제가 되도록 코드 수정

$(document).ready(function() {
  var values = [];
  $('.form-check-input').each(function() {
    var val = $(this).val();
    if (val && val !== '전체적용' && val !== '' && val !== 'on') {
      val = val.replace(/_.*/, '');
      if (values.indexOf(val) === -1) {
        values.push(val);
      }
    }
  });
  if (values.length > 0) {
    for (var i = 0; i < values.length; i++) {
      var text = values[i] + ' check 전체';
      var newButton = $('<button>').addClass('btn btn-outline-success mr-2 mb-2').text(text);
      $('.button-container').append(newButton);
      newButton.on('click', function(event) {
        event.preventDefault();

        var value = $(this).text().split(' ')[0];
        $('.form-check-input').each(function() {
          if ($(this).val().startsWith(value)) {
            $(this).prop('checked', function(index, checked) {
              return !checked;
            });
          }
        });
        
        const checkboxes = document.querySelectorAll('input[name="checkbox[]"]');
        const checkedValues = Array.from(checkboxes).filter(c => c.checked).map(c => c.value);
        console.log(checkedValues); // 선택된 체크박스 값 출력
        $("#workboard_arrCheck").val(checkedValues);
        
        // 해당 value에 속하는 checkbox들이 모두 체크되어 있는지 확인하여 'check 전체' 버튼의 텍스트 변경
        var allChecked = true;
        $('.form-check-input').each(function() {
          if ($(this).val().startsWith(value) && !$(this).prop('checked')) {
            allChecked = false;
          }
        });
        if (allChecked) {
          $(this).text(value + ' check 전체 해제');
        } else {
          $(this).text(value + ' check 전체');
        }
      });
    }  
  }
});

변경된 부분은 다음과 같습니다.

• 24~44번째 줄에서 'check 전체' 버튼을 클릭할 때마다 해당 value에 속하는 checkbox들이 전체 체크 혹은 전체 체크 해제되도록 수정하였습니다. 이전에는 'check 전체' 버튼을 누를 때마다 모든 checkbox가 체크되었는데, 이번에는 해당 value에 속하는 checkbox들만 체크되도록 변경하였습니다.
• 47~56번째 줄에서 'check 전체' 버튼의 텍스트를 변경하는 부분이 추가되었습니다. 해당 value에 속하는 checkbox들이 모두 체크되어 있는지 확인하여 'check 전체' 버튼의 텍스트를 'check 전체 해제'로 변경하거나, 그렇지 않으면 'check 전체'로 변경합니다.

 

이것이 최종버튼을 클릭하면 토글되고, 반영되는 것을 구현한 코드이다.

$(document).ready(function() {
  var values = [];
  $('.form-check-input').each(function() {
    var val = $(this).val();
    if (val && val !== '전체적용' && val !== '' && val !== 'on') {
      val = val.replace(/_.*/, '');
      if (values.indexOf(val) === -1) {
        values.push(val);
      }
    }
  });
  if (values.length > 0) {
    // '초기화' 버튼 추가
    var resetButton = $('<button>').addClass('btn btn-outline-danger mr-2 mb-2').text('초기화');
    $('.button-container').append(resetButton);
    resetButton.on('click', function(event) {
      event.preventDefault();

      $('.form-check-input').prop('checked', false);
      const checkboxes = document.querySelectorAll('input[name="checkbox[]"]');
      const checkboxArray = Array.from(checkboxes);
      checkboxArray.forEach((checkbox) => {
        const checkedValues = checkboxArray.filter(c => c.checked).map(c => c.value);
        $("#workboard_arrCheck").val(checkedValues);
      });
    });

    for (var i = 0; i < values.length; i++) {
      var text = values[i] + ' check 전체';
      var newButton = $('<button>').addClass('btn btn-outline-success mr-2 mb-2').text(text);
      $('.button-container').append(newButton);
      newButton.on('click', function(event) {
        event.preventDefault();

        var value = $(this).text().split(' ')[0];
        $('.form-check-input').each(function() {
          if ($(this).val().startsWith(value)) {
            $(this).prop('checked', !$(this).prop('checked'));
          }
        });

        const checkboxes = document.querySelectorAll('input[name="checkbox[]"]');
        const checkboxArray = Array.from(checkboxes);
        checkboxArray.forEach((checkbox) => {
          const checkedValues = checkboxArray.filter(c => c.checked).map(c => c.value);
          $("#workboard_arrCheck").val(checkedValues);
        });
      });
    }   
  }
});

위의 코드에서는 "초기화" 버튼을 추가하고, 해당 버튼 클릭 시 모든 체크박스를 unchecked 상태로 변경합니다. 또한, 체크박스를 클릭했을 때도 변경된 체크박스 상태를 checkedValues 변수에 저장하여 $("#workboard_arrCheck").val()를 이용해 값이 업데이트되도록 하였습니다.