添加/删除单选按钮上的表单元素类单击[关闭]

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 的新手。有人能给我一个关于如何实现这一点的语法吗？我也做了一个小提琴

请看这里

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");});

通常，您不一定希望页面上的所有单选按钮都具有这种行为，因此您可以给它们一个自己的类，或者将它们包装在另一个元素中并以这种方式引用它们，即输入radios在<div id="wrap">，然后

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

更新

您可以使用 HTML5 属性来指定隐藏哪个表单see fiddle

我输入data-form="#1" 以表明当单击此按钮时我想隐藏<form id="1"。 javascript是：

$($(this).data("form")).addClass("hide");

小提琴有更多的功能