Javascript : table 태그 name ,id 값으로 행과 열 구분하여 checkbox 체크 가능 범위 조절하는 함수

HTML

<tbody>
    <tr>
        <td> 정책의 이해</td>
        <td>
            <input type="checkbox" name="line1" id="check1" value="[6/29 정책의 이해]" onclick="handleCheckboxClick(this)">
            <label for="check1"></label>
        </td>
        <td class="bg-gray"></td>
        <td>
            <input type="checkbox" name="line1" id="check2" value="[8/24 정책의 이해]" onclick="handleCheckboxClick(this)">
            <label for="check1"></label>
        </td>
        <td class="bg-gray"></td>
    </tr>
    <tr>
        <td> 설치기술 실무</td>
        <td>
            <input type="checkbox" name="line2" id="check1" value="[6/29  설치기술 실무]" onclick="handleCheckboxClick(this)">
            <label for="check1"></label>
        </td>
        <td class="bg-gray"></td>
        <td>
            <input type="checkbox" name="line2" id="check2" value="[8/24 설치기술 실무]" onclick="handleCheckboxClick(this)">
            <label for="check1"></label>
        </td>
        <td class="bg-gray"></td>
    </tr>
    <tr>
        <td>인증제도의 이해 </td>
        <td>
            <input type="checkbox" name="line3" id="check1" value="[6/29 인증제도의 이해]" onclick="handleCheckboxClick(this)">
            <label for="check1"></label>
        </td>
        <td class="bg-gray"></td>
        <td>
            <input type="checkbox" name="line3" id="check2" value="[8/24  인증제도의 이해]" onclick="handleCheckboxClick(this)">
            <label for="check1"></label>
        </td>
        <td class="bg-gray"></td>
    </tr>
    <tr>
        <td> 적용방법 ①</td>
        <td class="bg-gray"></td>
        <td>
            <input type="checkbox" name="line4" id="check1" value="[6/30 적용방법 ①]" onclick="handleCheckboxClick(this)">
            <label for="check1"></label>
        </td>
        <td class="bg-gray"></td>
        <td>
            <input type="checkbox" name="line4" id="check2" value="[8/25 적용방법 ①]" onclick="handleCheckboxClick(this)">
            <label for="check1"></label>
        </td>
    </tr>
    <tr>
        <td> 평가항목별 적용방법 ②</td>
        <td class="bg-gray"></td>
        <td>
            <input type="checkbox" name="line5" id="check1" value="[6/30  평가항목별 적용방법 ②]" onclick="handleCheckboxClick(this)">
            <label for="check1"></label>
        </td>
        <td class="bg-gray"></td>
        <td>
            <input type="checkbox" name="line5" id="check2" value="[8/25 평가항목별 적용방법 ②]" onclick="handleCheckboxClick(this)">
            <label for="check1"></label>
        </td>
    </tr>
</tbody>

Javascript

//이준호 작성 
//체크 박스 중복 체크 방지 코드
function handleCheckboxClick(checkbox) {

  const checkboxes_names = document.getElementsByName(checkbox.name);
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  
  // 클릭된 항목 담는 배열 변수
  const checkedValues = [];
  checkboxes.forEach(function(checkbox) {
  // 각 체크박스 요소에 대한 처리
  if (checkbox.checked) {
	  if (checkedValues.length > 0 && checkedValues[0] !== checkbox.id) {
		    
		    alert('알림: 동일한 기수 과목인지 확인하세요 !');
		    checkbox.checked =false;
	  }else{
		  checkedValues.push(checkbox.id);
	  }
    
  }
});
 
  checkboxes_names.forEach(function(cb) {
    if (cb!== checkbox) {
    	
      cb.checked = false;
      
      
    }
	
  });
  
  
  
}

행과 열을 input 태그 값으로 구분 하였습니다 .

같은 행은 동일한 name 값을 줘 구분을 하였고 

열을 동일한 id 값을 주었습니다. 

그래서 동일한 기수 수업 내용만 checkbox가 클릭되도록 코딩하였습니다. 

첫 수업을 3기 수업의 checkbox를 클릭했으면 두번째 체크 박스도  3기 수업이어야 합니다.