JQuery выбрать все флажки, которые разделяют ту же тр ID

Question

Я работаю на некоторые JQuery, что будет проверять HTML флажков, которые разделяют один и тот же ID

<span class="idclass"><input type="checkbox" class="idleft" name="selectALL" value="WLEVEL04"> Select All </span> 


<td class="left"><input type="checkbox" name="unchecked[]" value="499703"></td> 
<td class="left"><input type="checkbox" name="unchecked[]" value="855155"></td> 
<td class="left"><input type="checkbox" name="unchecked[]" value="234203"></td> 
<td class="left"><input type="checkbox" name="unchecked[]" value="489741"></td> 

вот мой JQuery

$(".idleft").live('click', function() { 
     var id = $(this).val(); 
     $(this).attr('tr').val(id).find(':checkbox').attr('checked', this.checked); 
     }); 

Answer 1

Я считаю, что-то вроде это то, что вы ищете:

Fiddle: http://jsfiddle.net/tymeJV/3GkT3/

JQ:

$(".idleft").change(function() { 
    if (this.checked) { 
     $("input[name^='unchecked']").each(function() { 
      $(this).prop("checked", true); 
     }); 
    } else { 
     $("input[name^='unchecked']").each(function() { 
      $(this).prop("checked", false); 
     }); 
    } 
}); 

Answer 2

простое решение:

$('input[type="checkbox"]').change(function(){ 
    var self = this, 
     checked = self.checked, 
     elClass = self.className.replace('id',''); 
    $('td.' + elClass).find('input[type="checkbox"]').prop('checked',checked); 
}); 

JS Fiddle demo.

Это работает (и easily scalable), если флажок имеет имя-класса одного (в данном случае idleft) и, что имя-класса, минус id части, такое же, как имя-класса в td элементы.

Это, однако, проще использовать id (а не потенциально должны фильтровать через список потенциальных классов названий, а также избегать метода replace()), учитывая следующий HTML:

<table> 
    <tbody> 
     <tr> 
      <td><span class="idclass"><input type="checkbox" id="left" class="idleft" name="selectALL" value="WLEVEL04" />Select All</span></td> 
      <td class="left"><input type="checkbox" name="unchecked[]" value="499703" /></td> 
      <td class="left"><input type="checkbox" name="unchecked[]" value="855155" /></td> 
      <td class="left"><input type="checkbox" name="unchecked[]" value="234203" /></td> 
      <td class="left"><input type="checkbox" name="unchecked[]" value="489741" /></td> 
     </tr> 
     <tr> 
      <td><span class="idclass"><input type="checkbox" id="different" class="iddifferent" name="selectALL" value="WLEVEL04" />Select All</span></td> 
      <td class="different"><input type="checkbox" name="differentName[]" value="499703" /></td> 
      <td class="different"><input type="checkbox" name="differentName[]" value="855155" /></td> 
      <td class="different"><input type="checkbox" name="differentName[]" value="234203" /></td> 
      <td class="different"><input type="checkbox" name="differentName[]" value="489741" /></td> 
     </tr> 
    </tbody> 
</table> 

С следующие (лишь незначительно-поправки) JQuery:

$('input[type="checkbox"]').change(function(){ 
    var self = this, 
     checked = self.checked, 
     elClass = self.id; 
    $('td.' + elClass).find('input[type="checkbox"]').prop('checked',checked); 
}); 

JS Fiddle demo.

Ссылки:

• change().
• find().
• prop().