如何根据从 Struts 1.3 框架中的下拉列表中选择的特定值在 JSP 页面中显示隐藏的复选框字段?
How to display a hidden checkbox field in a JSP page on the basis of specific value selected from dropdown in Struts 1.3 framework?
我想使用 Nested Tags
、Javascript
等在 Struts 1.3 framework
中创建一个复选框,只有当用户 select 从 select dropdown
和 checkbox
的值应该在用户从 dropdown
中选择其他值时重置。
因为你还没有发布你的代码,我自己管理它,试图提供答案
$(document).ready(function () {
$(function () {
$("#id-select").change( function(){
var $this = $(this);
$('input[type=checkbox]').each( function(){
if( $(this).val() == $this.val()) {
$(this).parent().siblings().css('display', 'none');
$(this).parent().css('display', 'block');
$('input[type=checkbox]').css('display', 'none');
$(this).css('display', 'block');
}
})
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='id-select'>
<option value="">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br>
<div>
<label for="volvo" style='display:none;'>
<input type="checkbox" id="volvo" value="volvo" style='display:none;'>
volvo</label>
<label for="saab" style='display:none;'>
<input type="checkbox" id="saab" value="saab" style='display:none;'> saab</label>
<label for="opel" style='display:none;'>
<input type="checkbox" id="opel" value="opel" style='display:none;'> opel</label>
<label for="audi" style='display:none;'>
<input type="checkbox" id="audi" value="audi" style='display:none;'>
audi</label>
</div>
更新 使用 JavaScript
您好@Arvind,我已将其更改为与 JavaScript
,
一起使用
可能需要很多改进,我没有在JavaScript
中编码
function showCheckBox($this) {
var cols = document.getElementsByClassName('class-label');
for(i=0; i<cols.length; i++) {
cols[i].style.display = 'none';
}
var cols = document.getElementsByClassName('class-cb');
for(i=0; i<cols.length; i++) {
cols[i].style.display = 'none';
cols[i].checked = false;
}
var array = document.getElementsByTagName("input");
for(var ii = 0; ii < array.length; ii++)
{
if(array[ii].type == "checkbox")
{
if(array[ii].value == $this.value )
{
array[ii].style.display = 'block';
array[ii].parentElement.style.display = 'block';
}
}
}
}
<select id='id-select' onchange="showCheckBox(this);">
<option value="">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
<div>
<label for="volvo" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="volvo" value="volvo" style='display:none;'>volvo
</label>
<label for="saab" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="saab" value="saab" style='display:none;'> saab
</label>
<label for="opel" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="opel" value="opel" style='display:none;'>opel
</label>
<label for="audi" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="audi" value="audi" style='display:none;'>audi
</label>
</div>
function showCheckBox($this) {
var cols = document.getElementsByClassName('class-label');
for(i=0; i<cols.length; i++) {
cols[i].style.display = 'none';
}
var cols = document.getElementsByClassName('class-cb');
for(i=0; i<cols.length; i++) {
cols[i].style.display = 'none';
}
var array = document.getElementsByTagName("input");
for(var ii = 0; ii < array.length; ii++)
{
if(array[ii].type == "checkbox")
{
if(array[ii].value == $this.value )
{
array[ii].style.display = 'block';
document.getElementById("volvo").checked = false;
array[ii].parentElement.style.display = 'block';
}
}
}
}
<select id='id-select' onchange="showCheckBox(this);">
<option value="">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<div>
<label for="volvo" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="volvo" value="volvo" style='display:none;'>volvo
</label>
<label for="saab" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="saab" value="saab" style='display:none;'> saab
</label>
<label for="opel" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="opel" value="opel" style='display:none;'>opel
</label>
<label for="audi" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="audi" value="audi" style='display:none;'>audi
</label>
</div>
我想使用 Nested Tags
、Javascript
等在 Struts 1.3 framework
中创建一个复选框,只有当用户 select 从 select dropdown
和 checkbox
的值应该在用户从 dropdown
中选择其他值时重置。
因为你还没有发布你的代码,我自己管理它,试图提供答案
$(document).ready(function () {
$(function () {
$("#id-select").change( function(){
var $this = $(this);
$('input[type=checkbox]').each( function(){
if( $(this).val() == $this.val()) {
$(this).parent().siblings().css('display', 'none');
$(this).parent().css('display', 'block');
$('input[type=checkbox]').css('display', 'none');
$(this).css('display', 'block');
}
})
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='id-select'>
<option value="">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br>
<div>
<label for="volvo" style='display:none;'>
<input type="checkbox" id="volvo" value="volvo" style='display:none;'>
volvo</label>
<label for="saab" style='display:none;'>
<input type="checkbox" id="saab" value="saab" style='display:none;'> saab</label>
<label for="opel" style='display:none;'>
<input type="checkbox" id="opel" value="opel" style='display:none;'> opel</label>
<label for="audi" style='display:none;'>
<input type="checkbox" id="audi" value="audi" style='display:none;'>
audi</label>
</div>
更新 使用 JavaScript
您好@Arvind,我已将其更改为与 JavaScript
,
一起使用
可能需要很多改进,我没有在JavaScript
function showCheckBox($this) {
var cols = document.getElementsByClassName('class-label');
for(i=0; i<cols.length; i++) {
cols[i].style.display = 'none';
}
var cols = document.getElementsByClassName('class-cb');
for(i=0; i<cols.length; i++) {
cols[i].style.display = 'none';
cols[i].checked = false;
}
var array = document.getElementsByTagName("input");
for(var ii = 0; ii < array.length; ii++)
{
if(array[ii].type == "checkbox")
{
if(array[ii].value == $this.value )
{
array[ii].style.display = 'block';
array[ii].parentElement.style.display = 'block';
}
}
}
}
<select id='id-select' onchange="showCheckBox(this);">
<option value="">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
</select>
<div>
<label for="volvo" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="volvo" value="volvo" style='display:none;'>volvo
</label>
<label for="saab" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="saab" value="saab" style='display:none;'> saab
</label>
<label for="opel" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="opel" value="opel" style='display:none;'>opel
</label>
<label for="audi" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="audi" value="audi" style='display:none;'>audi
</label>
</div>
function showCheckBox($this) {
var cols = document.getElementsByClassName('class-label');
for(i=0; i<cols.length; i++) {
cols[i].style.display = 'none';
}
var cols = document.getElementsByClassName('class-cb');
for(i=0; i<cols.length; i++) {
cols[i].style.display = 'none';
}
var array = document.getElementsByTagName("input");
for(var ii = 0; ii < array.length; ii++)
{
if(array[ii].type == "checkbox")
{
if(array[ii].value == $this.value )
{
array[ii].style.display = 'block';
document.getElementById("volvo").checked = false;
array[ii].parentElement.style.display = 'block';
}
}
}
}
<select id='id-select' onchange="showCheckBox(this);">
<option value="">Select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<div>
<label for="volvo" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="volvo" value="volvo" style='display:none;'>volvo
</label>
<label for="saab" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="saab" value="saab" style='display:none;'> saab
</label>
<label for="opel" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="opel" value="opel" style='display:none;'>opel
</label>
<label for="audi" class='class-label' style='display:none;'>
<input type="checkbox" class='class-cb' id="audi" value="audi" style='display:none;'>audi
</label>
</div>