如何根据从 Struts 1.3 框架中的下拉列表中选择的特定值在 JSP 页面中显示隐藏的复选框字段？

Question

我想在Struts 1.3 framework 中使用Nested Tags、Javascript 等创建一个复选框，只有当用户从选择dropdown 中选择特定值并且checkbox 的值应该被重置时才会显示当用户从dropdown 中选择其他值时。

Answer 1

由于你没有发布你的代码，我自己管理它，试图提供答案

jsFiddle

 $(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>

Answer 2

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>