当复选框被选中时显示表格行

当复选框id="post"被选中/取消选中时，如何使用jQuery显示/隐藏id="hidden"这一行？当复选框被选中时显示表格行

<tr> 
     <td valign="top"> 
      <p>Contact Method:</p> 
     </td> 
     <td>&nbsp;</td> 
     <td align="left" valign="top"> 
       <p> 
        <input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Phone" id="phone" /> 
        <label style="margin-right: 25px;">Phone</label> 
       </p> 
       <p> 
        <input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Email" id="email" /> 
        <label style="margin-right: 25px;">Email</label> 
       </p> 
       <p> 
        <input style="width:20px!IMPORTANT;" type="checkbox" name="CheckboxGroup1[]" value="Post" id="post" /> 
        <label style="margin-right: 25px;">Post</label> 
       </p> 
     </td> 
    </tr> 
    <tr id="hidden">  
     <td> 
     <p>Address (if applicable):</p> 
     </td> 
     <td>&nbsp;</td> 
     <td colspan="2"><input type="text" name="address" id="address" /></td> 
    </tr>

来源

2012-08-14 Rob

与jQuery的做一种紧凑的方法：

$(document).ready(function() {  
    $("#post").change(function() { 
     $("#hidden").toggle(); 
    }); 
})

工作演示：JSFiddle。

来源

2012-08-14 13:01:33 Chris

这就是我曾尝试的，但是当复选框被选中时，它既不显示也不隐藏。我使用WordPress的事实会有什么不同？ – Rob 2012-08-14 13:03:34

@Rob请看看我刚刚添加的工作演示。你能告诉我们非工作版本的源代码吗？ – Chris 2012-08-14 13:06:23

试试这个：

$(document).ready(function() { 
    $('#post').change(function(){ 
     $('#hidden').css('display', this.checked ? 'block' : 'none') 
    }) 
})

Fiddle

来源

2012-08-14 13:00:25 undefined

我使用Wordpress的事实会有所作为，因为它不起作用。 – Rob 2012-08-14 13:06:04

@Rob是的，它使，你确定jQuery加载正确吗？没有冲突？你把脚本放在$（document）.ready（）处理程序中吗？ – undefined 2012-08-14 13:08:49

试试这个....

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script> $("#post").click(function(){ $("#hidden").toggle(); })); </script>

来源

2012-08-14 13:03:36

试试这个：

jQuery(function ($) { 
    $('tr#hidden').hide(); 

    $('input#post').change(function(e) { 
     if($(this).attr('checked')) 
     { 
      $('tr#hidden').show(); 
     } 
     else 
     { 
      $('tr#hidden').hide(); 
     } 
    }); 
});

来源

2012-08-14 13:08:19 MMCACHRAN

好吧例如：

<div id="hidden"> 
<p>Some Sample Content</p> 
</div> 

<div id="control"> 
<input type="checkbox" id="check" /> 
<label for="check">Show Element</label> 
</div>

使用jQuery这样的：

$(document).ready(function(){ 
    $('#check').click(function(){ 
     checkIt(); 
    }); 
}); 

function checkIt(){ 
    if ($('#check:checked').val() == "on"){ 
     $('#hidden').css({'display':'block'}); 
    } else { 
     $('#hidden').css({'display':'none'}); 
    } 
}

此外，这里是一个工作示例：http://jsfiddle.net/dbs3r/

来源

2012-08-14 13:13:43 Amyth

当复选框被选中时显示表格行

回答

相关问题