基于使用javascript选择的默认单选按钮显示Div
我有一个基于两个单选按钮的表单。如果在页面加载中选择了一个单选按钮,我想显示一个DIV。如果值“YES”保存在表单上,则在每个页面加载时应显示DIV。如果表单上未保存任何值,则DIV不应可见 另外,我已经用Javascript实现了DIV单选按钮显示和隐藏的功能 这是我的代码:-第页的第一部分基于使用javascript选择的默认单选按钮显示Div,javascript,Javascript,我有一个基于两个单选按钮的表单。如果在页面加载中选择了一个单选按钮,我想显示一个DIV。如果值“YES”保存在表单上,则在每个页面加载时应显示DIV。如果表单上未保存任何值,则DIV不应可见 另外,我已经用Javascript实现了DIV单选按钮显示和隐藏的功能 这是我的代码:-第页的第一部分 <script> function yesnoinsCheck() {
<script>
function yesnoinsCheck() {
if (document.getElementById('yesinsCheck').checked) {
document.getElementById('showexplain').style.display = 'block';
style.opacity = 0;
setTimeout(fade, 40);
}
else document.getElementById('showexplain').style.display = 'none';
style.opacity = 1;
setTimeout(fade, 40);
}
</script>
<tr>
<td>
<input type="radio" class="had-insurance" onchange="javascript:yesnoinsCheck();" id="yesinsCheck" name="125" value="1" <?php if($detail_trailer['had_insurance_'] == '1') echo 'checked'?> checked=""><span class="radio-text">Yes</span>
<input type="radio" class="had-insurance" onchange="javascript:yesnoinsCheck();" id="noinsCheck" name="125" value="2" <?php if($detail_trailer['had_insurance_'] == '2') echo 'checked'?>><span class="radio-text">No</span>
</td>
</tr>
<tr id="showexplain" style="display: none;"></tr>
第页的部分:-
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('boxphysical').style.display = 'block';
}
else document.getElementById('boxphysical').style.display = 'none';
}
</script>
<td>
<input type="radio" class="physical-damage" onclick="javascript:yesnoCheck();" id="yesCheck" name="120" value="1" <?php if($detail_trailer['physical_damage_insurance'] == '1') echo 'checked'?> checked=""><span class="radio-text">Yes</span>
<input type="radio" class="physical-damage" onclick="javascript:yesnoCheck();" id="noCheck" name="120" value="2" <?php if($detail_trailer['physical_damage_insurance'] == '2') echo 'checked'?>><span class="radio-text">No</span>
</td>
<tr id="boxphysical" style="display:none;" ></tr>
试着这样做:编辑
这应该可以解决您的问题。如果您使用tr第一个创建表标记。是的,它工作正常,但还有一个问题,我有两个不同的单选选项部分。因此它在同一页的一个部分上工作,而不是在另一个部分上。将这些单选按钮也添加到您的问题中。对不起,我是堆栈流中的新成员,这是y,我将代码放错了placeI为所有文件提供了一个头文件,因此如果onload不是call-in body,那就太好了。我已经更新了答案。您可以自己添加。任何方式都没有问题。
<script>
function atLoadTime(){
if (document.getElementById('yesinsCheck').checked) {
document.getElementById('showexplain').style.display = 'block';
}
if (document.getElementById('yesCheck').checked) {
document.getElementById('boxphysical').style.display = 'block';
}
}
function yesnoinsCheck() {
if (document.getElementById('yesinsCheck').checked) {
document.getElementById('showexplain').style.display = 'block';
// style.opacity = 0;
//setTimeout(fade, 40);
}
else document.getElementById('showexplain').style.display = 'none';
// style.opacity = 1;
//setTimeout(fade, 40);
}
function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
document.getElementById('boxphysical').style.display = 'block';
// style.opacity = 0;
//setTimeout(fade, 40);
}
else document.getElementById('boxphysical').style.display = 'none';
// style.opacity = 1;
//setTimeout(fade, 40);
}
</script>
<body onload="javascript:atLoadTime();">
<input type="radio" class="had-insurance" onchange="javascript:yesnoinsCheck();" id="yesinsCheck" name="125" value="1" <?php if($detail_trailer['had_insurance_'] == '1')echo 'checked'?> ><span class="radio-text">Yes</span>
<input type="radio" class="had-insurance" onchange="javascript:yesnoinsCheck();" id="noinsCheck" name="125" value="2" <?php if($detail_trailer['had_insurance_'] == '2') echo 'checked'?>><span class="radio-text">No</span>
<input type="radio" class="physical-damage" onclick="javascript:yesnoCheck();" id="yesCheck" name="120" value="1" <?php if($detail_trailer['physical_damage_insurance'] == '1') echo 'checked'?>><span class="radio-text">Yes</span>
<input type="radio" class="physical-damage" onclick="javascript:yesnoCheck();" id="noCheck" name="120" value="2" <?php if($detail_trailer['physical_damage_insurance'] == '2') echo 'checked'?>><span class="radio-text">No</span>
<div id="showexplain" style="display: none;">hello there</div>
<div id="boxphysical" style="display: none;">second div............</div>
</body>