单击提交按钮时，根据复选框选择显示div

Question

I have a page that will have multiple checkboxes on it, the user will select some or all of the checkboxes. I then want them to click a submit button, which will show the specific divs based on the checkboxes selection. Very new to java coding and would appreciate any help. My HTML code is below.

Thanks

 <div class="col-md-3"> <p> <input name="field" type="checkbox" value="Chest X-Rays" class="chk" /> Chest X-Rays</p> <div class="text1" style="display:none">Important to help distinguish acute bronchitis, which should not be treated with antibiotics, from pneumonia, which should</div> <p><input name="field" type="checkbox" value="Pulse Oximetry" class="chk" /> Pulse Oximetry</p> <div class="text2" style="display:none">Important to assess oxygenation in patients with new complaint of dyspnea</div> <p><input name="field" type="checkbox" value="ECG" class="chk" /> ECG</p> <div class="text3" style="display:none">Not unreasonable in a middle-aged patient with a moderately severe acute illness and risk factors for CAD but not an essential part of the workup</div> <p> <input name="field" type="checkbox" value="D-dimer Level" class="chk" /> D-dimer Level</p> <div class="text4" style="display:none">Although patient has mildly decreased O2 sat, he has prominent upper respiratory symptoms and no risk factors for PE, so is not indicated</div> <p> <input name="field" type="checkbox" value="ABG" class="chk" /> ABG</p> <div class="text5" style="display:none">Unlikely to be useful because pulse oximetry already shows degree of oxygenation and clinical findings do not suggest inadequate ventilation</div> </div> <div class="col-md-3"> <p> <input name="field" type="checkbox" value="Serum Chemistries" class="chk" /> Serum Chemistries</p> <div class="text6" style="display:none">Not unreasonable in a patient taking an ACE-I, which can cause renal dysfunction and hyperkalemia, particularly in a patient who may also be slightly dehydrated from his acute illness. They can also help with risk stratification of pneumonia. However, these tests are likely of low yield in someone who does not appear seriously ill and has no history of renal disease or symptoms likely to cause electrolyte disturbance</div> <p> <input name="field" type="checkbox" value="Chest CT Scan" class="chk" /> Chest CT Scan</p> <div class="text7" style="display:none">Not indicated for acute lower respiratory infection, and patient has no risk factors for PE</div> <p> <input name="field" type="checkbox" value="Blood or Sputum Cultures" class="chk" /> Blood or Sputum Cultures</p> <div class="text8" style="display:none">Cultures have not been shown to improve outcomes in CAP but they are helpful in patients ill enough to require hospitalization, particularly those with risk factors for unusual or resistant organisms</div> <p> <input name="field" type="checkbox" value="CBC" class="chk" /> CBC</p> <div class="text9" style="display:none">Does not help diagnosis, treatment or disposition in any of the plausible causes</div> <p> <input name="field" type="checkbox" value="Troponin Level" class="chk" /> Troponin Level</p> <div class="text10" style="display:none">Patient&rsquo;s symptoms do not suggest acute coronary ischemia</div> <input type="button" id="buttonClass" value="Submit" onClick="show_all();"> </div> 

Answer 1

Try This

 $( "#target" ).submit(function( event ) { $('input:checked').parent('p').css('background-color','red'); event.preventDefault(); }); 

 <form id="target" action="#"> <div class="col-md-3"> <p> <input name="field" type="checkbox" value="Chest X-Rays" class="chk" /> Chest X-Rays</p> <div class="text1" style="display:none">Important to help distinguish acute bronchitis, which should not be treated with antibiotics, from pneumonia, which should</div> <p><input name="field" type="checkbox" value="Pulse Oximetry" class="chk" /> Pulse Oximetry</p> <div class="text2" style="display:none">Important to assess oxygenation in patients with new complaint of dyspnea</div> <p><input name="field" type="checkbox" value="ECG" class="chk" /> ECG</p> <div class="text3" style="display:none">Not unreasonable in a middle-aged patient with a moderately severe acute illness and risk factors for CAD but not an essential part of the workup</div> <p> <input name="field" type="checkbox" value="D-dimer Level" class="chk" /> D-dimer Level</p> <div class="text4" style="display:none">Although patient has mildly decreased O2 sat, he has prominent upper respiratory symptoms and no risk factors for PE, so is not indicated</div> <p> <input name="field" type="checkbox" value="ABG" class="chk" /> ABG</p> <div class="text5" style="display:none">Unlikely to be useful because pulse oximetry already shows degree of oxygenation and clinical findings do not suggest inadequate ventilation</div> </div> <div class="col-md-3"> <p> <input name="field" type="checkbox" value="Serum Chemistries" class="chk" /> Serum Chemistries</p> <div class="text6" style="display:none">Not unreasonable in a patient taking an ACE-I, which can cause renal dysfunction and hyperkalemia, particularly in a patient who may also be slightly dehydrated from his acute illness. They can also help with risk stratification of pneumonia. However, these tests are likely of low yield in someone who does not appear seriously ill and has no history of renal disease or symptoms likely to cause electrolyte disturbance</div> <p> <input name="field" type="checkbox" value="Chest CT Scan" class="chk" /> Chest CT Scan</p> <div class="text7" style="display:none">Not indicated for acute lower respiratory infection, and patient has no risk factors for PE</div> <p> <input name="field" type="checkbox" value="Blood or Sputum Cultures" class="chk" /> Blood or Sputum Cultures</p> <div class="text8" style="display:none">Cultures have not been shown to improve outcomes in CAP but they are helpful in patients ill enough to require hospitalization, particularly those with risk factors for unusual or resistant organisms</div> <p> <input name="field" type="checkbox" value="CBC" class="chk" /> CBC</p> <div class="text9" style="display:none">Does not help diagnosis, treatment or disposition in any of the plausible causes</div> <p> <input name="field" type="checkbox" value="Troponin Level" class="chk" /> Troponin Level</p> <div class="text10" style="display:none">Patient&rsquo;s symptoms do not suggest acute coronary ischemia</div> <input type="submit" id="buttonClass" value="Submit" onClick="show_all();"> </div> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>