Search code examples
javascriptcssstruts-1

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?


I want to create a checkbox in Struts 1.3 framework using Nested Tags, Javascript etc which should only be displayed when a user selects a specific value from a select dropdown and the value of checkbox should get reset when user chooses other values from dropdown.


Solution

  • 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>