Моя цель состоит в том, чтобы флажок был выбран, даже если щелкнуть флажок снаружи. Я имею в виду, что он будет проверять этот флажок, даже если пользователь нажимает на td class = "checktd". Я уже пробовал опору («проверил», правда), но это не работает. есть идеи как это сделать?

Jquery :

<script type="text/javascript">
     $(".checktd").on("click", function () {

        $('.checkItem').prop('checked', true);

    });

</script>

Html :

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>


<table style="width:40%">
  <tr>
    <th>Check</th>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td class="checktd"><input type="checkbox" class="checkItem"></td>
    <td>Bill Gates</td>
    <td>55577854</td>
  </tr>
  <tr>
    <td class="checktd"><input type="checkbox" name="checkItem"></td>
    <td>Kevin Gates</td>
    <td>544444</td>
  </tr>
</table>
0
Kevin himch 26 Фев 2018 в 21:46

4 ответа

Лучший ответ

Таким образом, вы можете «переключаться», а не только «проверять».

Смотрите, что я включил IF внутри, чтобы проверить currentTarget. Это потому, что если вы нажмете на сам флажок, он будет "переключаться" два раза.

$(function () {
   $(".checktd").on("click", function (e) {
      if (this != e.target) { return; }
      var check = $(this).find("input[type=checkbox]");
      check .prop('checked', !check[0].checked);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>


<table style="width:40%">
  <tr>
    <th>Check</th>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td class="checktd"><input type="checkbox" class="checkItem"></td>
    <td>Bill Gates</td>
    <td>55577854</td>
  </tr>
  <tr>
    <td class="checktd"><input type="checkbox" name="checkItem"></td>
    <td>Kevin Gates</td>
    <td>544444</td>
  </tr>
</table>
0
Rafael Paulino 26 Фев 2018 в 18:55

Переписал мой ответ полностью.

Здесь используются обработчики 2 кликов. Второй находит щелчок на .checkItem, а затем останавливает распространение события щелчка вверх до своего родителя, т.е. .checktd. Первый находит щелчок на .checktd, затем удерживает флажок с классом checkItem в переменной $cb. Затем он проверяет, установлен ли флажок. Если проверено, то это не проверено. Если нет, то происходит обратное. Если событие click происходит именно на флажке, то распространение события останавливается, так что флажок ведет себя так, как и должно быть без обработчика первого нажатия.

N.B: ваш второй флажок имеет name="checkItem", я думаю, вы также хотите использовать class="checkItem", верно?

  $(".checktd").on("click", function (e) {

               var $cb=$(this).find('.checkItem');

               if($cb.prop('checked')){

                    $cb.prop('checked', false);
                }else{

                    $cb.prop('checked', true);
                }


            });
$(".checkItem").on("click", function (e) {

               e.stopPropagation();


            });
0
Istiaque Ahmed 26 Фев 2018 в 19:27
$('#content').on( "click", function() {
    $(this).prop('checked', 'checked');
});

Это должно быть в document.ready из jquery. Этот ответ является дополнительным ответом @ Istiaque.

0
Sanket Patel 26 Фев 2018 в 18:53

Используйте это .

Как правило, получите дочерние элементы .checkItem из ТД, по которому щелкнули

$(this).children('.checkItem').prop('checked', true);
$(".checktd").on("click", function() {

  $(this).children('.checkItem').prop('checked', true);

});
.checktd {
  cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
  table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  
  th,
  td {
    padding: 5px;
    text-align: left;
  }
</style>


<table style="width:40%">
  <tr>
    <th>Check</th>
    <th>Name</th>
    <th>Telephone</th>
  </tr>
  <tr>
    <td class="checktd"><input type="checkbox" class="checkItem"></td>
    <td>Bill Gates</td>
    <td>55577854</td>
  </tr>
  <tr>
    <td class="checktd"><input type="checkbox" class="checkItem"></td>
    <td>Kevin Gates</td>
    <td>544444</td>
  </tr>
</table>
0
Ele 26 Фев 2018 в 18:54