자바스크립 각 재질별 checkbox 구현 후 동작 만들어보기

프로젝트에서 연구하는 과제입니다.

철판의 재질이 나오면, 그 재질을 요약해서 버튼을 만들고 그 버튼이 클릭되면 해당 재질만 체크되고 해제되는 로직...

이틀째 연구중인데 그리 쉽지 않네요.

첫번째 코드 완성

var value = $(this).text();
var rows = document.querySelectorAll('table tr');

var count = 0;

rows.forEach(function(row) {
  var specElement = row.querySelector('.spec');
  var checkbox = row.querySelector('input[name="checkbox[]"]');
  
  if (specElement && checkbox) {
    var specText = specElement.textContent.trim();
    var checkboxValue = checkbox.previousElementSibling.textContent.trim();
    
    if (specText === value && checkboxValue === '레이져') {
      console.log('선택했을 때 specText: ' + specText);
      console.log('value: ' + value);
      console.log('checkboxValue: ' + checkboxValue);
      console.log(checkbox);
      
      checkbox.checked = !checkbox.checked;
      count++;
    }
  }
});

console.log('checkbox 반복 회수: ' + count);

 

30회 이상 코드를 수정해서 만든건데 만족도 높습니다.

 

 

실제 제작중인 화면, 위의 재질을 클릭하면 해당 재질의 레이져가 체크되는 상태...

코드 기록을 남겨둡니다.