How to get checked checkbox value of specified div in jQuery

Question

<td id="optrep0">
  <input type="checkbox" value="1" class="warna" id="warna" name="warna[]"> 
  <input type="checkbox" value="2" class="warna" id="warna" name="warna[]">
  </td>
<td id="optrep1">
  <input type="checkbox" value="1" class="warna" id="warna" name="warna[]"> 
  <input type="checkbox" value="2" class="warna" id="warna" name="warna[]">
  </td>
<td id="optrep2">
  <input type="checkbox" value="1" class="warna" id="warna" name="warna[]"> 
  <input type="checkbox" value="2" class="warna" id="warna" name="warna[]">
  </td>

I need to find checked value of specified divs having ids: optrep0,optrep1,optrep2 above, I have tried using

var optrep0= jQuery(':checkbox:checked').map(function () {
    return this.value;
}).get();

And send optrep0 variable to server, but it will send every checked value. So, I want to send only specified divs only per variable, I also tried

 var optrep0= jQuery('#optrep0>#warna:checkbox:checked').map(function () {
     return this.value;
 }).get();

PS: sub id name on td id cannot be changed as is as, I only need javascript example how to solve this case, thank you :D

Answer 1

Give space in > and use dot for class warna

Live Demo

var optrep0= jQuery('#optrep0 > .warna:checkbox:checked').map(function () {
    return this.value;
}).get();

Answer 2

Try using descendant selector by putting a > and don't use :checkbox, only :checked is needed

var optrep0= jQuery('#optrep0 > :checked').map(function () {
 return this.value;
 }).get();