[英]hide <tr> based on selected radio button
我想基于从单选按钮中选择的值来隐藏表格行。 这些单选按钮是基于从下拉列表框中选择的值创建的。
这是我的代码
列表框的HTML代码
<select name="txtLT" id="LT" >
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
jQuery的
$(document).ready(function() {
$("#LT").change(function() {
var selVal = $(this).val();
$("#tblerow").html('');
if(selVal == 'c') {
$("#tblerow").append('<td><input type="radio" id="cmpof" name="cmpof" value="1" onclick="show()" />1 <input type="radio" id="cmpof" name="cmpof" value="2" onclick="hide()"/>2</td>');
}
});
});
现在,如果选择了单选按钮2,则带有tr2的表行应消失。 请帮助我找到解决方案。
编辑
我尝试了以下JavaScript,但并未隐藏该行。
function show() { document.getElementById('sbjrow').style.display = 'block'; }
function hide() { document.getElementById('sbjrow').style.display = 'none'; }
请问这里有什么问题吗?
您可以像这样使用jQuery的hide
和show
功能:
$(function () {
$('#LT').change(function () {
if ($(this).val() == 'c') {
$('.radios').show();
} else {
$('.radios').hide();
}
});
$('input[name=cmpof]').change(function () {
if ($('#LT').val() == 'c' && $(this).val() == 'bar') {
$('#table tr').eq(1).hide();
} else {
$('#table tr').eq(1).show();
}
});
});
如果您不希望默认情况下显示表格行,只需使用CSS即可。
JsFiddle示例: http : //jsfiddle.net/AX5TJ/1/
更新的版本可能更接近您想要的版本: http : //jsfiddle.net/AX5TJ/2/
同样要小心,脚本中有语法错误:定义$("#LT").change(function() {
,必须以});
结尾});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.