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

时间:2015-02-25 15:47:08

标签: javascript html

我的页面上会有多个复选框,用户将选中部分或全部复选框。然后,我希望他们单击​​一个提交按钮,该按钮将根据复选框选择显示特定的div。非常新的java编码,将不胜感激任何帮助。我的HTML代码如下。

谢谢

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

1 个答案:

答案 0 :(得分:0)

试试这个

&#13;
&#13;
$( "#target" ).submit(function( event ) {
	$('input:checked').parent('p').css('background-color','red');
	event.preventDefault();
	});
&#13;
<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>
&#13;
&#13;
&#13;