Question

我有这个HTML

<input type="radio" id="radio1" name="radios" value="all" checked>
<label for="radio1">Credit Card</label>

<input type="radio" id="radio2" name="radios"value="false">
<label for="radio2">Debit Card</label>

<input type="radio" id="radio3" name="radios"value="false">
<label for="radio3">Internet Banking</label>

<form id="frm1">
    <input type="text" placeholder="1"/>
</form>
<form id="frm2">
    <input type="text" placeholder="2"/>
</form>

有3个单选按钮和两个表单。一个css类

.hide
{
    display:none;
}

可以隐藏表单。

我知道如何通过将类添加到表单元素来手动隐藏表单。但是我想创建一个javascript，它将隐藏任何单选按钮选择。

我知道这是一些javascript，但我是javascript和css的新手。有人可以给我一个如何实现这个的sytax吗？我也做了一个小提琴

请在此处找到

http://jsfiddle.net/cT3dF/

Answer 1

我认为您正在寻找的代码：

function hideForm(){
    //its good that ids start with a character a to z
    //add another line with form name if you need
    frm1.className="hide";
    frm2.className="hide";
}
function onClickHide(element){
    document.getElementById(element).onclick=function(){
        hideForm();
    }
}

//write here a line like this with the id of every checkbox 
//that onclick will hide the form's defined at hideForm()
onClickHide('radio1');
onClickHide('radio2');
onClickHide('radio3');

http://jsfiddle.net/jY6gY/1/

提示：永远不要使用数字

开始您的ID

Answer 2

您在寻找this吗？

我添加了一些javascript，特别是jQuery：

$("input[type=radio]").click(function(){$("form").hide();});

要添加课程，您可以使用

$("input[type=radio]").click(function(){$("form").addClass("hide");});

通常，你不一定要对页面上的所有单选按钮都有这种行为，所以你可以为它们提供一个自己的类，或者将它们包装在另一个元素中并以这种方式引用它们，即放{{1}在radio中，然后是

<div id="wrap">

<强>更新

您可以使用HTML5属性指定要隐藏的表单see fiddle

我放$("#wrap input[type=radio]").click(function(){$("form").hide();});表示点击此按钮时我想要隐藏data-form="#1"。 javascript是：

<form id="1"

小提琴有更多功能

在单选按钮上单击添加/删除表单元素的类

2 个答案: