Проп проверено не работает - особый случай - PullRequest
Новая
       37

Проп проверено не работает - особый случай

0 голосов
/ 15 мая 2018

Почему при нажатии на первую кнопку не трескается?почему при обращении к одному и тому же ckeckbox один скрипт не работает, а другой - правильно? 

$('.button1').click(function(event){
  //console.log("click1");
  $('#table1 .checkbox1').prop('checked',true);
});
$('.button2').click(function(event){
  //console.log("click2");
  $('.checkbox1').prop('checked',true);
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<table id="table1">
  <input type="checkbox" class="checkbox1" />
  <input type="button" class="button1"  value="Checked1" />
  <input type="button" class="button2"  value="Checked2" />
</table>

Ответы [ 2 ]

0 голосов
/ 15 мая 2018

При рендеринге вышеупомянутого html внутри <table id="table1"> нет элемента input, поэтому ваша первая кнопка не сработала.Когда вы удалите #table1 селектор из вашего кода, он будет работать.Или вам нужно добавить действительную разметку, для этого просто измените table на div. 

$('.button1').click(function(event){
  //console.log("click1");
  $('#table1 .checkbox1').prop('checked',true);
});
$('.button2').click(function(event){
  //console.log("click2");
  $('.checkbox1').prop('checked',true);
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div id="table1">
  <input type="checkbox" class="checkbox1" />
  <input type="button" class="button1"  value="Checked1" />
  <input type="button" class="button2"  value="Checked2" />
</div>

ИЛИ 

$('.button1').click(function(event){
  //console.log("click1");
  $('.checkbox1').prop('checked',true);
});
$('.button2').click(function(event){
  //console.log("click2");
  $('.checkbox1').prop('checked',true);
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<table id="table1">
  <input type="checkbox" class="checkbox1" />
  <input type="button" class="button1"  value="Checked1" />
  <input type="button" class="button2"  value="Checked2" />
</table>

Для работы с идентификатором таблицы 

$('.button1').click(function(event){
  //console.log("click1");
  $('#table1').parent().find('.checkbox1').prop('checked',true);
});
$('.button2').click(function(event){
  //console.log("click2");
  $('.checkbox1').prop('checked',true);
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<table id="table1">
  <input type="checkbox" class="checkbox1" />
  <input type="button" class="button1"  value="Checked1" />
  <input type="button" class="button2"  value="Checked2" />
</table>
0 голосов
/ 15 мая 2018

Поскольку браузер очищает вашу разметку и удаляет <table id="table1"></table> (поскольку это недопустимая разметка для полной разметки - input не может быть прямым потомком table).

Как таковойВаш селектор (#table1 .checkbox1) не соответствует ни одному элементу.Ваша визуализированная разметка выглядит следующим образом: 

<input type="checkbox" class="checkbox1" />
<input type="button" class="button1" value="Checked1" />
<input type="button" class="button2" value="Checked2" />

<table id="table1">

</table>

Изображение для справки из Chrome Dev Tools:

enter image description here

...