當複選框被選中時顯示錶格行

當複選框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

當複選框被選中時顯示錶格行

回答

相關問題