根據復選框顯示隱藏表行
[英]Show Hide Table Row based on Check Box
問題描述
在此小提琴中，我試圖顯示/隱藏包含基於復選框選擇的文件輸入的表行。 但是沒有調用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>
4 個解決方案
解決方案1
3 已采納 2013-11-20 11:07:16
從您的代碼本身可以很明顯地看出您缺少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();
}
});
});
解決方案2
2 2013-11-20 11:07:04
小提琴中有多個問題
在左側面板的第二個下拉菜單中選擇“無環繞頭/主體”-選擇“
onload，您的腳本將添加到一個窗口中window.onload = function(){//your code}包裝器使該函數在包裝器函數中處於本地狀態。您需要在頁面中包含jQuery庫
像
show()/hide()這樣的方法綁定到jQuery包裝器對象僅文本框
然后
jQuery(function () {
$('#c1').change(function () {
$('#fileLabel, #fileBox').toggle(this.checked)
}).change()
})
演示： 小提琴
解決方案3
0 2013-11-20 11:11:17
該功能正常工作，請在html的頭部編寫javascript
<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>
解決方案4
0 2013-11-20 11:28:01
在左面板Framework and Extensions >> Second Drop下拉菜單中沒有換行
它將開始工作。
根據復選框顯示/隱藏文本框
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.