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

Question

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

Answer 1

As you have not posted your code I have managed it my own, tried to provide answer

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> 

UPDATE using JavaScript
Hello @Arvind I have changed this to work with JavaScript ,
May be lots of improvement needed, I do not code in 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>