Отслеживание изменений флажков и индексация для переключения светодиодов

Я хотел бы поймать изменение флажка, а также уловить индекс выбранного или невыбранного флажка. Мне интересно, может ли это быть в порядке.

$("input[type='checkbox']").change(function () {
  $("input[type='checkbox']").each(function (i) {
    //my code here
    switch (i) {
      case 0:
        break;
      case 1:
        break;
          .
          .
    }
  });
});

Мой html выглядит примерно так:

<table>
<tr>
<td id='led' bgcolor=#cccccc>OFF</td>
<td><input type='checkbox' name='' value='' ></td>
</tr>
<tr>
<td id='led' bgcolor=#cccccc>OFF</td>
<td><input type='checkbox' name='' value='' ></td>
</tr>
<tr>
<td id='led' bgcolor=#cccccc>OFF</td>
<td><input type='checkbox' name='' value='' ></td>
</tr>
<tr>
</table>

Поэтому я хотел бы определить, какое поле было выбрано, а затем изменить светодиод на ON и на красный цвет фона. С другой стороны, если поле не выбрано, я хочу вернуть светодиод в положение ВЫКЛ и изменить цвет на #cccccc


javascript checkbox jquery
person electronixG    schedule 06.04.2013    source источник
comment
В вашем коде есть несколько синтаксических ошибок, )}; должно быть });.   -  person undefined    schedule 06.04.2013
comment
вы можете получить доступ к флажку с установленным / снятым флажком, используя $(this) внутри вашего $("input[type='checkbox']").change(function() {});   -  person Ejaz    schedule 06.04.2013
comment
Какой у вас HTML? И, во-вторых, charliftl, не зная вашей цели, мы не можем предоставить связный / разумный ответ или предложения.   -  person David says reinstate Monica    schedule 06.04.2013
comment
что объективно? есть гораздо более простые подходы. Предоставьте более подробную информацию о сценарии использования и о том, что вы хотите знать о флажках. Демонстрация на jsfiddle.net всегда помогает получить более качественные ответы   -  person charlietfl    schedule 06.04.2013

Ответы (2)


arrow_upward
5
arrow_downward

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

$('input:checkbox').change(function(){
    // caching the $(this) jQuery object, since we're using it more than once:
    var that = $(this),
         // index of element with regard to its sibling elements:
        index = that.index(),
        // index with regard to other checkbox elements:
        checkboxIndex = that.index('input:checkbox');

        if (this.checked){ // this.checked evaluates to a Boolean (true/false)
            // this block executed only if the checkbox *is* checked
        } else {
            // this block executed only if the checkbox is *not* checked
        }
});

Отредактировано для удовлетворения требований в (отредактированном/уточненном) вопросе:

$('input:checkbox').change(function () {
    var that = this,
        $that = $(that),
        led = $that.closest('tr').find('td:first-child');
    led.removeClass('on off').addClass(function(){
        return that.checked ? 'on' : 'off';
    });
});

демонстрация JS Fiddle.

Соединение вышеуказанного jQuery со следующим CSS:

.led,
.led.off {
    background-color: #ccc;
}

.led.on {
    color: #000;
    background-color: #f00;
}

И HTML:

<table>
    <tr>
        <td class='led'>OFF</td>
        <td>
            <input type='checkbox' name='' value='' />
        </td>
    </tr>
    <tr>
        <td class='led'>OFF</td>
        <td>
            <input type='checkbox' name='' value='' />
        </td>
    </tr>
    <tr>
        <td class='led'>OFF</td>
        <td>
            <input type='checkbox' name='' value='' />
        </td>
    </tr>
</table>

Обратите внимание, что я заменил id="led" на class="led", так как id должен быть уникальным в пределах документа. Это важно, когда речь идет о JavaScript и достоверности HTML.

Рекомендации:

person David says reinstate Monica    schedule 06.04.2013
comment
+1; Однако, чтобы убедиться, что вы знаете, самая большая проблема заключается в том, что вы создаете одну локальную переменную (that) и две глобальные переменные (index и checkboxIndex). Кроме того, если вы выберете вариант переноса this в объект jQuery, вы также можете использовать его вместо this.checked (например, that.prop('checked'), чтобы убедиться, что this не был изменен где-то еще. - person vol7ron; 06.04.2013
comment
Где я создаю глобальные переменные? Все переменные следуют за объявлением var в локальной области видимости. Или я что-то упускаю/не понимаю? И мне не нравится использовать that.is(':checked') и that.prop('checked') просто потому, что это неоправданно дорого (даже несмотря на то, что я не кэшировал узел this). - person David says reinstate Monica; 06.04.2013
comment
Да, это все локальные переменные - person electronixG; 06.04.2013
comment
@electronixG: нет, это не все локальные переменные - var a=1,b=2,c=3; не то же самое, что var a=1;var b=2;var c=3; см. stackoverflow.com/a/7384541/183181< /а> - person vol7ron; 06.04.2013
comment
@DavidThomas: дело в том, что если вы собираетесь обернуть this в объект jQuery, тогда будет легче поддерживать этот код, если вы используете объект jQuery в другом месте, да, это дороже, но вы сбиваете с толку того, кто идет за вами. используя that, this и $(this) повсюду, и вы уже создали большую часть накладных расходов (расходов), когда решили использовать jQuery в первую очередь. - person vol7ron; 06.04.2013

arrow_upward
0
arrow_downward

Вы можете сделать это, если флажок установлен или не используется внутри каждого кода функции:

if ( $(this).is(':checked') ) {
  // ...
} else {
  // ...
}
person IndoKnight    schedule 06.04.2013
comment
зачем вообще создавать новую переменную? if(this.checked){...} - person vol7ron; 06.04.2013
comment
Извините, а где здесь новая переменная? - person IndoKnight; 06.04.2013
comment
Я думаю, что он/она имеет в виду использование $(this), заключенного в jQuery, а не this; поскольку this.checked возвращает то же логическое значение, что и $(this).is(':checked'). Но, честно говоря, я предполагаю. - person David says reinstate Monica; 06.04.2013
comment
Хорошо, извините за неправильный выбор слов. $(this) создает новый объект, технически внутри этого объекта есть функции/переменные, но я имел в виду не это. Я просто дошел до того, что this.checked намного дешевле, чем $(this).prop('checked') - person vol7ron; 06.04.2013
comment
Согласованный. Спасибо за ваш вклад! - person IndoKnight; 06.04.2013