1

I have a dynamically loaded table where each row has a checkbox option, with an assigned #id of either 1,2 or 3. I need to make a function that will shows a hidden div corresponding to the #id of the checkbox checked. I'm currently using .change() to trigger the function, but this ends up showing the hidden div when unchecking a box, which I do not want to happen. Is there another way to trigger this function for just on "checked", and not "unchecked". See code below:

<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>

Thanks, Mark

4

3 回答 3

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);
        }
    });
});

演示：小提琴

于 2013-09-21T15:09:05.680 回答
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/

于 2013-09-21T15:06:34.087 回答
0

html 标记中缺少结束引号（样式属性之后）

<div class="3" style="display:none;> Some Hidden Text</div>
于 2013-09-21T15:07:21.893 回答