CODEWITHSUNDEEP
javascriptjquerycheckboxprop
Samir Llorente
Samir Llorente

Reputation: 266

prop checked does not work - special case

Why when you click on the first button does not checked? Why when referring to the same checkbox one script does not work while the other does it correctly?

$('.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>

Upvotes: 0

Views: 182

Answers (2)

Kiran Shahi
Kiran Shahi

Reputation: 7980

While rendering the above html there is no input element inside <table id="table1"> so your first button did not work. When you remove #table1 selector form your code it will work. Or you need to add valid markup, for that simply change table to 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>

OR

$('.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>

To work with table id 

$('.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>

Upvotes: 1

BenM
BenM

Reputation: 53198

Because the browser is cleaning your markup, and removing <table id="table1"></table> (because it's not valid markup for a complete markup -- input cannot be a direct child of table).

As such, your selector (#table1 .checkbox1) does not match any elements. Your rendered markup looks like this:

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

<table id="table1">

</table>

Image for reference from Chrome Dev Tools:

enter image description here

Upvotes: 1

Related Questions