2013-09-21 3 views
1

У меня динамически загружаемая таблица, в которой каждая строка имеет опцию флажка с назначенным #id из 1,2 или 3. Мне нужно сделать функцию, которая будет показывает скрытый div, соответствующий #id установленного флажка. В настоящее время я использую .change(), чтобы вызвать функцию, но в результате она показывает скрытый div при снятии флажка, который я не хочу делать. Есть ли другой способ запустить эту функцию только для «проверенных», а не «непроверенных». Смотрите ниже код:Trigger function from checkbox checked, without using .change()

<tr> 
    <td > 
     <input id="1" class="link_contact" type="checkbox"/> 
    </td> 
</tr> 
<tr> 
    <td > 
     <input id="2" class="link_contact" type="checkbox"/> 
    </td> 
</tr> 
<tr> 
    <td > 
     <input id="3" class="link_contact" type="checkbox"/> 
    </td> 
</tr> 

<div class="1" style="display:none;"> Some Hidden Text</div> 
<div class="2" style="display:none;"> Some Hidden Text</div> 
<div class="3" style="display:none;"> Some Hidden Text</div> 

<script> 
$(document).ready(function() { 
    $(".link_contact").change(function() { 
     $("." + $(this).attr('id')).fadeIn(800); 
     $("." + $(this).attr('id')).delay(7000).fadeOut(800); 
    }); 
}); 
</script> 

Спасибо, Марк

ответ

1

Вы должны использовать :checked селектор с в функции is()

<script> 
$(document).ready(function() { 
    $(".link_contact").change(function() { 
     if($(this).is(":checked")) { 
      $("." + $(this).attr('id')).fadeIn(800); 
      $("." + $(this).attr('id')).delay(7000).fadeOut(800); 
      $('.dialog_warning').fadeOut(800); 
     } 
    }); 
}); 
</script> 

проверить это http://api.jquery.com/checked-selector/

+0

Спасибо! Все дайте ответ как можно скорее! – Mark

+0

Приветствую :) – zzlalani

0

Отсутствует окончание цитаты (после того, как стиль атрибут) в вашем теге html

<div class="3" style="display:none;> Some Hidden Text</div> 
+0

Спасибо, но это была только опечатка. Не то, что я искал. – Mark

+0

Эта пропущенная цитата вызывает ошибку;) –

4

Выполните действия, только если установлен флажок

$(document).ready(function() { 
    $(".link_contact").change(function() { 
     if (this.checked) { 
      $("." + this.id).stop(true, true).fadeIn(800).delay(7000).fadeOut(800); 
      $('.dialog_warning').fadeOut(800); 
     } 
    }); 
}); 

Demo: Fiddle

Смежные вопросы