另一种显示和隐藏按钮的方式
Another way to show and hide buttons
如果我在驱动器上本地运行文件,以下代码可以正常工作。不幸的是,我需要将此表单上传到一个名为MasterControl的软件中。它不起作用。我想知道是否有另一种编码方式可以通用于本地,也可以上传到MasterControl的服务器。
这个代码的目的是——一旦你点击第一级问题的"是"按钮,下一级问题就会出现。如果单击第一级上的"否"按钮,并且显示下一级问题中的问题,则会清除所有选定的按钮并隐藏第二级问题的部分。
以下是代码:
HTML代码:
<div id="divDeathOccurred" class="fieldRow">
<div class="leftLabel labelWidth22">
<label for="">A. Has a death occurred?</label>
</div>
<div class="leftField">
<div class="formField34">
<input id="rbDeathOccurred" name="rbDeathOccurred"
type="radio" class="radiobuttonfield" title="Death Occurred"
value="Yes" onclick="javascript:USAYesNoCheckDO();" />Yes
<input id="rbDeathOccurred" name="rbDeathOccurred"
type="radio" class="radiobuttonfield" title="Death Occurred"
value="No" onclick="javascript:USAYesNoCheckDO();" />No
</div>
</div>
<p> </p>
<div id="USADOYesNo" style="display:none">
<ol type="1" class="indentList">
<li>Is there a reasonable possibility that a device failure
or malfunction was a direct or indirect factor in the death?
<br>
<input id="rbDOYesNo" name="rbDOYesNo" type="radio"
class="USDO radiobuttonfield" title="Yes Reportable" value="Yes"
onclick="javascript:USDeviceFailure30Days();" />
<label for="rbDOYesNo" class="rptColor">Yes -
reportable</label>
<input id="rbDOYesNo" name="rbDOYesNo" type="radio"
class="USDO1 radiobuttonfield" title="No" value="No"
onclick="javascript:USDeviceFailure30Days();" />No - No
Report
<div id="calc" class="indentListCalc">
<input id="dt30Days3" type="text" class="textfieldCalc
labelWidth25" alt="Device Malfunction" />
</div>
<p></p>
</li>
<li>Is there a reasonable possiblity that a device design
defect was direct or indirect factor in the death?
<br>
<input id="rbDOYesNo1" name="rbDOYesNo1" type="radio"
class="USDO2 radiobuttonfield" title="Yes Reportable" value="Yes"
onclick="javascript:USDeviceDesign30Days();"/>
<label for="rbDOYesNo1" class="rptColor">Yes -
Reportable</label>
<input id="rbDOYesNo1" name="rbDOYesNo1" type="radio"
class="USDO3 radiobuttonfield" title="No" value="No"
onclick="javascript:USDeviceDesign30Days();" />No - No Report
<div id="calc1" class="indentListCalc">
<input id="dt30Days1" type="text" class="textfieldCalc
labelWidth25" alt="Device Design" />
</div>
<p></p>
</li>
<li>Is there a reasonable possiblity that the device
labeling was direct or indirect factor in the death?
<br>
<input id="rbDOYesNo2" name="rbDOYesNo2" type="radio"
class="USDO4 radiobuttonfield" title="Yes Reportable"
value="Yes" onclick="javascript:USDeviceLabeling30Days();"/>
<label for="rbDOYesNo2" class="rptColor">Yes -
Reportable</label>
<input id="rbDOYesNo2" name="rbDOYesNo2" type="radio"
class="USDO5 radiobuttonfield" title="No" value="No"
onclick="javascript:USDeviceLabeling30Days();"/>No - No Report
<div id="calc2" class="indentListCalc">
<input id="dt30Days2" type="text" class="textfieldCalc
labelWidth25" alt="Device Labeling" />
<p></p>
</div>
</li>
</ol>
</div>
</div> <!-- final section Death Occurred end -->
Javascript代码:
function USAYesNoCheckDO() {
if (document.getElementById('rbDeathOccurred').checked) {
document.getElementById('USADOYesNo').style.display = 'block';
} else {
document.getElementById('USADOYesNo').style.display = 'none';
document.getElementsByClassName('USDO')[0].checked = false;
document.getElementsByClassName('USDO1')[0].checked = false;
document.getElementById('calc').style.display = 'none';
document.getElementsByClassName('USDO2')[0].checked = false;
document.getElementsByClassName('USDO3')[0].checked = false;
document.getElementById('calc1').style.display = 'none';
document.getElementsByClassName('USDO4')[0].checked = false;
document.getElementsByClassName('USDO5')[0].checked = false;
document.getElementById('calc2').style.display = 'none';
}
}
我仍在学习所有这些HTML、Javascript,我刚刚进入JQuery。
如果你需要我把这些代码放在jsfiddle中,请告诉我。
非常感谢
IreneS
更新:
我忘了补充一下,当你选择按钮以及显示和隐藏时,代码在服务器上是有效的——有一件事不起作用,那就是清除所选的按钮。
再次感谢。
更新2:
经过数小时的研究和尝试学习Jquery,希望它能为我提供另一种方法来解决这个问题并使其在服务器上运行,但不幸的是,它没有。我尝试Jquery的原因是,我正在查看MasterControl服务器上的其他表单,它们是用Jquery编码的。不幸的是,作为Jquery的初学者,我无法让它同时在本地驱动器和服务器上工作。请有人检查一下,看看我遗漏了什么或做错了什么。
function getChecked(radioGroupName, index)
{
var oRadioList = document.getElementsByName(radioGroupName);
return oRadioList[index].checked;
}
function setChecked(radioGroupName, index, state)
{
var oRadioList = document.getElementsByName(radioGroupName);
oRadioList[index].checked = state;
}
function USAYesNoCheckDO()
{
if(getChecked("rbDeathOccured",0) == true)
{
$('#USADOYesNo').slideDown(1000);
}
else
{
$('#USADOYesNo').slideUp(1000);
setChecked("rbDOYesNo",0,false);
setChecked("rbDOYesNo",1,false);
setChecked("rbDOYesNo1",0,false);
setChecked("rbDOYesNo1",1,false);
setChecked("rbDOYesNo2",0,false);
setChecked("rbDOYesNo2",1,false);
}
}
或者,如果你知道如何解决这个问题。正如我在按钮工作以及问题的显示和隐藏工作之前所提到的,问题是当我想重置并将其设置回原始状态时——空白。
再次感谢您的帮助。
IreneS
更新3:
请任何人对如何解决这个问题有任何想法。
我真的很感激任何帮助。
谢谢你,
IreneS
更新4:
万一有人和我有同样的问题,需要一个解决方案,经过这么长时间的搜索,我终于找到了一个网站,它给了我答案,而且很有效!耶!我只是根据自己的需要定制了编码,它在本地和服务器上都能工作。
http://www.electrictoolbox.com/javascript-clear-form/
IreneS。
对多个元素使用相同的id
属性。id
在页面上应该是唯一的,只有name
可以相同以对相同类型的多个输入元素进行分组。我不知道这是否是主要问题,但这只是一个开始。
- 我可以在不连接按钮的情况下以角度方式使用zclip吗
- 另一种显示和隐藏按钮的方式
- 在视图中渲染多个按钮以编程方式进行本机反应
- 使用两个按钮(提交按钮和普通按钮),它们应该以不同的方式提交相同的表单
- 切换两个隐藏单选按钮的最佳方式是什么
- 在向导表单中使用按钮提交值的最佳方式
- 触发器快捷方式”;STRG+Plus按钮”;使用Javascript
- 如果不使用HTML按钮,就无法通过编程方式触发SVG动画
- 可能是更好的方式来编码这个棘手的切换按钮
- 以编程方式创建的“喜欢按钮”会泄漏大量内存
- 将按钮添加到导航栏并以编程方式显示它们
- 用户在Javascript的帮助下,仅通过单选按钮选择一个付款方式(信用卡)
- 如何修改我的 jQuery 以更新以不同方式激活的切换按钮上的 html
- ext.js 消息框按钮对齐方式
- 如何以编程方式单击从其他页面加载的按钮
- 通过单击按钮或表单提交禁用注册按钮,这两种方式都会阻止表单提交
- NG-模型似乎只在模态视图内的离子单选按钮上绑定一种方式
- 以编程方式单击 UIWebView 中的“提交”按钮(无元素 ID、名称、类或标记)
- 如何以 Angular 方式实现 Twitter 按钮
- Dijit 按钮显示图标,但不以编程方式显示标签