根據複選框顯示隱藏表格行

在此Fiddle我試圖根據複選框選擇顯示/隱藏包含文件輸入的表格行。但showHide函數沒有被調用。根據複選框顯示隱藏表格行

<div align="center" class="divBody"> 
<br /> 
<div id="controlHost"> 
    <div id="outerPanel"> 
     <table width="100%" cellpadding="2" cellspacing="5"> 
      <tr align="left"> 
       <td colspan="2"> 
        <input type="checkbox" id="c1" onclick="showHide()">only Textbox</input> 
       </td> 
      </tr> 
      <tr align="left" id="fileLabel"> 
       <td colspan="2"> 
        <span class="message" >Select file</span> 
       </td> 
      </tr> 
      <tr align="left" id="fileBox"> 
       <td valign="top" style="height:100%; width:70%;"> 
        <input type="file" id="FileInput" multiple="false" class="fileInput" style="height:100%; width:100%;"/> 
       </td> 
      </tr> 
     <tr align="left"> 
       <td colspan="2"> 
        <span class="message" >Types</span> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input type="text" id="txtTypes" tabindex="0" style="margin-left:1px;width:100%" maxlength="50" > 
       </td> 
      </tr> 
      <tr> 
       <td align="center"> 
        <input type="button" id="upload" name="Upload" value="Update" onclick="startUpload('FileInput', 1048576, 'uploadProgress', 'statusMessage', 'upload', 'cancel');" 
         class="button" /> 
        <input type="button" id="cancel" name="Cancel" value="Cancel" disabled="disabled" 
         onclick="cancelUpload();" class="button" /> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div>

來源

2013-11-20 Seenu

可能有一些問題。但是，如果我在本地運行相同的代碼，那麼它工作正常。 – SpiderCode

從你自己的代碼中可以明顯看出你錯過了jQuery庫（在小提琴中，我沒有看到包含庫）。

document.getElementById('fileLabel').show();

jQuery中作爲

$('#fileLabel').show();

.show()/.hide()是jQuery方法可以簡化這個。

像

$(document).ready(function() { 
    $('#c1').on('change', function(){ 
     if ($(this).prop('checked')) { 
      $('#filelabel').show(); 
      $('#fileBox').show(); 
     } 
     else { 
      $('#filelabel').hide(); 
      $('#fileBox').hide(); 
     } 
    }); 
});

來源

2013-11-20 11:07:16 Praveen

裏有小提琴多個問題

選擇不換行頭/身在左側面板中的第二個下拉 - 當onload選擇你的腳本中加入在一個使封裝函數本地化的函數的包裝器window.onload = function(){//your code}。
您需要在頁面中包含
方法，如show()/hide()綁定到jQuery的包裝對象

只有文本框

然後

jQuery(function() { 
    $('#c1').change(function() { 
     $('#fileLabel, #fileBox').toggle(this.checked) 
    }).change() 
})

演示jQuery庫：Fiddle

來源

2013-11-20 11:07:04

功能是工作，請寫javascript在HTML

<head> 
<script> 
function showHide() { 
    alert('called'); 
    var chbox = document.getElementById("c1"); 
    var vis = "none"; 
    for(var i=0;i<chboxs.length;i++) { 
     if(chbox.checked){ 
      alert('checked'); 
      document.getElementById('fileLabel').show(); 
      document.getElementById('fileBox').show(); 
      break; 
     } 
     else 
     { 
      alert('unchecked'); 
      document.getElementById('fileLabel').hide(); 
      document.getElementById('fileBox').hide(); 
      break; 
     } 
    } 
} 
</script> 
</head>

來源

2013-11-20 11:11:17

的頭部在左面板框架和擴展 >>第二個下拉設置不循環 - 在

它將開始工作。

來源

2013-11-20 11:28:01 SpiderCode

根據複選框顯示隱藏表格行

回答

相關問題