That is absolutely completely invalid mark-up. You must have the
<table> inside the <form>, not the opposite.
It's very simple, the second input is not a sibling of the first, it's
on a different TR, so next() will give you nothing. It's not "next" to
the other anymore. There are three ways to overcome that:
$(':checkbox').click(function(){
$(this).parent('td').next().children(':checkbox').attr('checked',
this.checked ? 'checked' : '');
});
or keeping the index at hand:
var $checkboxes = $(':checkbox');
$checkboxes.each(function(i){
$(this).click(function(){
$checkboxes.eq(i+1).attr('checked', this.checked ? 'checked' :
'');
});
});
or with event delegation (best if your form will be updated with
ajax):
$('#frmOne').click(function(e){
var $checks = $(this).find(':checkbox');
var $clicked = $(e.target);
if ( $clicked.is(':checkbox') ) {
var next = $checks.index($clicked) + 1;
$checks.eq(next).attr('checked', e.target.checked ? 'checked' :
'');
}
});
On Jan 20, 2:33 pm, spiraldev <spiral...@gmail.com> wrote:
> I am trying to get the input element from the current selection so for
> instance when I check a checkbox I want the next checkbox to be
> checked now I can use .next() if the checkbox is right next toeach
> other but once I put a td or span it doesn't work
>
> this doesn't work
>
> <table >
> <form method="post" id="frmOne">
> <tr>
> <th>Name</th>
> <th>Location</th>
> </tr>
> <tr>
> <td><input type="checkbox" class="checkbox" name="ss"
> value="1">
> Spiraldev
> <td><input type="checkbox" class="checkbox" name="ss"
> value="1">
> Sac Town</td>
> </tr>
> </form>
> </table>
>
> <script>
>
> $(document).ready(
> function(){
> $( "input.checkbox" ).click(
> function(){
> if($(this).attr('checked') == true){
>
> $(this).next('input[type=checkbox]]').attr('checked',true)
> }else{
>
> $(this).next('[type=checkbox]]').attr('checked',false)
> }
> }
> );
> }
> );
> </script>
>
> this does work
> <input type="checkbox" class="checkbox" name="ss" value="1">
> Spiraldev
> <input type="checkbox" class="checkbox" name="ss" value="1"> Sac Town
>
> <script>
>
> $(document).ready(
> function(){
> $( "input.checkbox" ).click(
> function(){
> if($(this).attr('checked') == true){
>
> $(this).next('input[type=checkbox]]').attr('checked',true)
> }else{
>
> $(this).next('[type=checkbox]]').attr('checked',false)
> }
> }
> );
> }
> );
> </script>
>
> Why? And What do I need to do?
