JSFiddle - React, Tailwind, and code Playground

by suphalak_26

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<form>
 <h2>Position Enquiry</h2>
    <!--Position Enquiry-->
 <fieldset>
  <legend>Position Enquiry:</legend>
  Date From: <input type="text">
  Date To: <input type="text">
 </fieldset>

  <!--Position Customer-->
  <fieldset>
   <legend>Position Customer:</legend>  
  </fieldset>
     
  <!--Position Criteria-->
  <fieldset>
  <legend>Position Criteria:</legend>
         <div>
    <label>View By</label>
    <select id="selId">
        <option value="Product Class" selected="selected">Product Class</option>
        <option value="Product Type">Product Type</option>
        <option vaule="Product Code">Product Code</option>
    </select>
</div>    
     
<div id="ProclassId">
    <h2>Product Class
         <span style="float:right"><a href="#" id="selAllProclassId">Select All</a> |
               <a href="#" id="clsAllProclassId">Clear All</a>
        </span>
    </h2>

      <ul>
          <li><input type="checkbox" name="Proclass1"/>Proclfgfgfgfass1</li>
          <li><input type="checkbox" name="Proclass2"/>Proclfgfass2</li>
          <li><input type="checkbox" name="Proclass3"/>Proclass3</li>
          <li><input type="checkbox" name="Proclass4"/>Proclass4 </li>
          <li><input type="checkbox" name="Proclass5"/>Proclass5dfdfdfddf </li>
      </ul>

      <div style="float:right">
          <input type="button" value="Filter"/>
      </div>
</div>
<!-------------------------------------------------------->  
<div id="ProTypeId">
    <h2>Product Type
        <span style="float:right;"> <a href="#" id="selAllProtypeId">Select All</a> |
               <a href="#" id="clsAllProtypeId">Clear All</a>
        </span>
    </h2>

     <ul>
         <li> <input type="checkbox" name="ProType1"/>ProType1</li>
         <li><input type="checkbox" name="ProType2"/>ProType2</li>
         <li><input type="checkbox" name="ProType3"/>ProType3</li>
         <li><input type="checkbox"...

CSS

h2{
    font-size: 12px;font-weight: bold;background-color: #e7e7e7;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;padding-left: 5px;
}
div{
    padding: 10px 0 10px 0;
}
body{
    font-size: 12px;
}
ul, li { float:left; display:inline; list-style-type:none; }
li{
    width:120px;
    display:inline;
}

JavaScript

/*jQuery('#chkAll').click(function(){
    jQuery(':checkbox').attr("checked",true);
});
jQuery('#remAll').click(function(){
     jQuery(':checkbox').attr("checked",false);
});
jQuery('#AddChkBox').click(function(){
    var text = jQuery('input[name="test1"]').val();
    jQuery('#chkId').append('<input type="checkbox" />' +"value"+'</br>');
});*/
changSelect();
 jQuery(':checkbox',jQuery('#ProclassId')).attr("checked",true);

/* Product Class*/
jQuery('#selAllProclassId').click(function(){
    jQuery(':checkbox',jQuery('#ProclassId')).attr("checked",true);
});
jQuery('#clsAllProclassId').click(function(){
    jQuery(':checkbox', jQuery('#ProclassId')).attr("checked",false);
});

/* Product Type*/
jQuery('#selAllProtypeId').click(function(){
    jQuery(':checkbox', jQuery('#ProTypeId')).attr("checked",true);
});
jQuery('#clsAllProtypeId').click(function(){
    jQuery(':checkbox', jQuery('#ProTypeId')).attr("checked",false);
});

function changSelect(){
    var selectType = jQuery('#selId').val();
      if(selectType =="Product Class"){
        jQuery('#ProTypeId').hide();
    }else{
        jQuery('#ProTypeId').show();
    }
    if(selectType =="Product Type"){
         jQuery('#ProclassId').hide();
    }else{
        jQuery('#ProclassId').show();
    }
}

jQuery('#selId').change(function(){
   changSelect();
});