Имея в качестве флажка таблицу <td>, как реализовать щелчок и перетащить множественный выбор на <td>

Question

У меня есть код, который меняет состояние флажка при нажатии <td>

$(document).ready(function() {
  $("td").click(function(e) {
    var chk = $(this).closest("td").find("input:checkbox").get(0);
    if (e.target != chk) {
      chk.checked = !chk.checked;
      if ($(this).closest("td").find("input:checkbox").prop("checked") == true) {
        $(this).closest("td").css("background-color", "red");
        console.log($(this).closest("td").find("input:checkbox").prop("checked"));
        console.log($(this).closest("td").find("input:checkbox").prop("value"));
      } else {
        $(this).closest("td").css("background-color", "white");
        console.log($(this).closest("label").find("input:checkbox").prop("checked"));
        console.log($(this).closest("label").find("input:checkbox").prop("value"));
      }
    }
  });


});

table,
th,
td {
  border: 1px solid black;
}

input[type="checkbox"] {
  /* display:none; */
}

td input:after {
  background-color: red;
}

<div class="table">
  <!-- <form method="POST"> -->
  <table id='sample'>
    <tr>
      <th>Time\Date</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
    <tr>
      <td>07:30-08:00</td>
      <td><input name="checkbox" value="A1" type="checkbox">A1</td>
      <td><input name="checkbox" value="B1" type="checkbox">B1</td>
      <td><input name="checkbox" value="C1" type="checkbox">C1</td>
      <td><input name="checkbox" value="D1" type="checkbox">D1</td>
      <td><input name="checkbox" value="E1" type="checkbox">E1</td>
      <td><input name="checkbox" value="F1" type="checkbox">F1</td>
      <td><input name="checkbox" value="G1" type="checkbox">G1</td>
    </tr>
    <tr>
      <td>08:00-08:30</td>
      <td><input name="checkbox" value="A2" type="checkbox">A2</td>
      <td><input name="checkbox" value="B2" type="checkbox">B2</td>
      <td><input name="checkbox" value="C2" type="checkbox">C2</td>
      <td><input name="checkbox" value="D2" type="checkbox">D2</td>
      <td><input name="checkbox" value="E2" type="checkbox">E2</td>
      <td><input name="checkbox" value="F2" type="checkbox">F2</td>
      <td><input name="checkbox" value="G2" type="checkbox">G2</td>
    </tr>
    <tr>
      <td>08:30-09:00</td>
      <td><input name="checkbox" value="A3" type="checkbox">A3</td>
      <td><input name="checkbox" value="B3" type="checkbox">B3</td>
      <td><input name="checkbox" value="C3" type="checkbox">C3</td>
      <td><input name="checkbox" value="D3" type="checkbox">D3</td>
      <td><input name="checkbox" value="E3" type="checkbox">E3</td>
      <td><input name="checkbox" value="F3" type="checkbox">F3</td>
      <td><input name="checkbox" value="G3" type="checkbox">G3</td>
    </tr>
  </table>
  <!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Мне нужно реализовать щелчок и перетащить через несколько <td>, что также будет проверять флажки. Я видел эту реализацию , но я все еще не могу получить эту работу с моим существующим кодом.

Answer 1

Ваша ссылка очень полезна, надеюсь, мой фрагмент может помочь вам в любом случае .. хорошего дня:)

$(document).ready(function() {
  var isMouseDown = false,
    isHighlighted;

  $("#sample input:checkbox").click(function() {
    return false;
  })
  $("#sample td:not(:first-child)")
    .mousedown(function() {
      isMouseDown = true;
      $(this).toggleClass("highlighted");
      isHighlighted = $(this).hasClass("highlighted");
      $(this).find("input:checkbox").prop("checked", isHighlighted);
      return false; // prevent text selection
    })
    .mouseover(function() {
      if (isMouseDown) {
        $(this).toggleClass("highlighted", isHighlighted);
        $(this).find("input:checkbox").prop("checked", isHighlighted);
      }
    })
    .bind("selectstart", function() {
      return false;
    })

  $(document)
    .mouseup(function() {
      isMouseDown = false;
    });
});

table,
th,
td {
  border: 1px solid black;
}

https: //stackoverflow.com/questions/58418830/having-table-td-as-checkbox-how-to-implement-click-and-drag-multiple-selectio#
input[type="checkbox"] {
  /* display:none; */
}

td input:after {
  background-color: red;
}

table td.highlighted {
  background-color: #999;
}

<div class="table">
  <!-- <form method="POST"> -->
  <table id='sample'>
    <tr>
      <th>Time\Date</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
    <tr>
      <td>07:30-08:00</td>
      <td><input name="checkbox" value="A1" type="checkbox">A1</td>
      <td><input name="checkbox" value="B1" type="checkbox">B1</td>
      <td><input name="checkbox" value="C1" type="checkbox">C1</td>
      <td><input name="checkbox" value="D1" type="checkbox">D1</td>
      <td><input name="checkbox" value="E1" type="checkbox">E1</td>
      <td><input name="checkbox" value="F1" type="checkbox">F1</td>
      <td><input name="checkbox" value="G1" type="checkbox">G1</td>
    </tr>
    <tr>
      <td>08:00-08:30</td>
      <td><input name="checkbox" value="A2" type="checkbox">A2</td>
      <td><input name="checkbox" value="B2" type="checkbox">B2</td>
      <td><input name="checkbox" value="C2" type="checkbox">C2</td>
      <td><input name="checkbox" value="D2" type="checkbox">D2</td>
      <td><input name="checkbox" value="E2" type="checkbox">E2</td>
      <td><input name="checkbox" value="F2" type="checkbox">F2</td>
      <td><input name="checkbox" value="G2" type="checkbox">G2</td>
    </tr>
    <tr>
      <td>08:30-09:00</td>
      <td><input name="checkbox" value="A3" type="checkbox">A3</td>
      <td><input name="checkbox" value="B3" type="checkbox">B3</td>
      <td><input name="checkbox" value="C3" type="checkbox">C3</td>
      <td><input name="checkbox" value="D3" type="checkbox">D3</td>
      <td><input name="checkbox" value="E3" type="checkbox">E3</td>
      <td><input name="checkbox" value="F3" type="checkbox">F3</td>
      <td><input name="checkbox" value="G3" type="checkbox">G3</td>
    </tr>
  </table>
  <!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Когда вы нажимаете mousedown, мы переключаем логическое значение, чтобы указать, что мышь нажата. При наведении курсора на TD мы проверяем, нажата ли мышь, а затем проверяем ее. Мы запрещаем поведение по умолчанию в mousedown, чтобы избежать выделения текста.

$(document).ready(function() {
	
  // one click
  $('td').on( 'click', function(){
    var $checkbox =  $(this).find('input:checkbox')
    $checkbox.click()
     if ( $checkbox[0].checked ) {
       $checkbox.parent().css("background-color", "red");
     } else {
       $checkbox.parent().css("background-color", "white");
     }
  })

  var mouseDown = false;
  $('td').on('mousedown touchstart', function(event) {
  
    // Disable text selection
    event.preventDefault();
    
    // set boolean
    mouseDown = true;
  });
  $(window.document).on('mouseup touchend', function(event) {
	  mouseDown = false;
	});
  
    $('td').on('mouseover', function(event) {
    	if (mouseDown) {
	      var $checkbox =  $(this).find('input:checkbox')
  	    if ( !$checkbox[0].checked ) {
        	$checkbox.click()
       	}
      }
    });
});

table,
th,
td {
  border: 1px solid black;
}

input[type="checkbox"] {
  /* display:none; */
}

td input:after {
  background-color: red;
}

<div class="table">
  <!-- <form method="POST"> -->
  <table id='sample'>
    <tr>
      <th>Time\Date</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
    </tr>
    <tr>
      <td>07:30-08:00</td>
      <td><input name="checkbox" value="A1" type="checkbox">A1</td>
      <td><input name="checkbox" value="B1" type="checkbox">B1</td>
      <td><input name="checkbox" value="C1" type="checkbox">C1</td>
      <td><input name="checkbox" value="D1" type="checkbox">D1</td>
      <td><input name="checkbox" value="E1" type="checkbox">E1</td>
      <td><input name="checkbox" value="F1" type="checkbox">F1</td>
      <td><input name="checkbox" value="G1" type="checkbox">G1</td>
    </tr>
    <tr>
      <td>08:00-08:30</td>
      <td><input name="checkbox" value="A2" type="checkbox">A2</td>
      <td><input name="checkbox" value="B2" type="checkbox">B2</td>
      <td><input name="checkbox" value="C2" type="checkbox">C2</td>
      <td><input name="checkbox" value="D2" type="checkbox">D2</td>
      <td><input name="checkbox" value="E2" type="checkbox">E2</td>
      <td><input name="checkbox" value="F2" type="checkbox">F2</td>
      <td><input name="checkbox" value="G2" type="checkbox">G2</td>
    </tr>
    <tr>
      <td>08:30-09:00</td>
      <td><input name="checkbox" value="A3" type="checkbox">A3</td>
      <td><input name="checkbox" value="B3" type="checkbox">B3</td>
      <td><input name="checkbox" value="C3" type="checkbox">C3</td>
      <td><input name="checkbox" value="D3" type="checkbox">D3</td>
      <td><input name="checkbox" value="E3" type="checkbox">E3</td>
      <td><input name="checkbox" value="F3" type="checkbox">F3</td>
      <td><input name="checkbox" value="G3" type="checkbox">G3</td>
    </tr>
  </table>
  <!-- </form> -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>