下面我们来看下如何来实现隐藏、显示功能;
需求是这样的,点击成功,确定按钮和下面的输入框都不显示,点击失败,确定按钮和下面的输入框都显示;
这里可以通过style对象的visibility属性设置元素是否可见,
使用 Style 对象属性的语法:
document.getElementById("id").style.property="值"
具体过程如下:
js文件中设置显示与否的函数:
function setNoVisibility(){
document.getElementById("bjkgan").style.visibility = "hidden";
document.getElementById("jqxsbma").style.visibility = "hidden";
document.getElementById("sbjqxsbxx").style.visibility = "hidden";
document.getElementById("jqxsbxx").style.visibility = "hidden";
document.getElementById("sbjqxsbxxma").style.visibility = "hidden";
}
function setVisibility(){
document.getElementById("bjkgan").style.visibility = "visible";
document.getElementById("jqxsbma").style.visibility = "visible";
document.getElementById("sbjqxsbxx").style.visibility = "visible";
document.getElementById("jqxsbxx").style.visibility = "visible";
document.getElementById("sbjqxsbxxma").style.visibility = "visible";
}
ftl文件中增加触发的函数:
<div class="col-lg-12">
<div class="Radio" id="bjRadio">
<label class="control-label" for="formGroupInputLarge">报价开关:</label>
<label>
<input type="radio" name="bjRadios" id="bjYes" οnclick="setNoVisibility()" value="1" checked>成功
</label>
<label>
<input type="radio" name="bjRadios" id="bjNo" οnclick="setVisibility()" value="0" checked>失败
</label>
<label>
<button class="btn btn-primary" type="button" id ="bjkgan" οnclick="savebjxx()">确定</button>
</label>
</div>
</div>
</div>
最后结果就是上面显示的结果。
这里由于使用style属性能够达到效果,但是隐藏元素之后,会出现一大片空白,为了达到隐藏元素又消除空白,这里可以使用display属性,js修改如下:
function setNoVisibility(){
document.getElementById("bjkgan").style.display = "none";
document.getElementById("jqxsbma").style.display = "none";
document.getElementById("sbjqxsbxx").style.display = "none";
document.getElementById("jqxsbxx").style.display = "none";
document.getElementById("sbjqxsbxxma").style.display = "none";
}
function setVisibility(){
document.getElementById("bjkgan").style.display = "";
document.getElementById("jqxsbma").style.display = "";
document.getElementById("sbjqxsbxx").style.display = "";
document.getElementById("jqxsbxx").style.display = "";
document.getElementById("sbjqxsbxxma").style.display = "";
}
效果如下: