HTML Checkbox onchange隐藏字段

时间:2014-02-04 17:06:21

标签: javascript html input checkbox hidden

我有以下页面:

<html>
<body>
    <form>
        <input type="hidden" id="tab_indexer" />
        <input type="checkbox" id="tab_id" />
        <input type="checkbox" id="tab_message" />
    </form>
</body>
</html>

所以,我需要的是,当用户更改选中的复选框时,隐藏字段上的值也会发生变化。此外,当页面加载时,它必须将隐藏字段上的复选框引用设置为已选中。

1 个答案:

答案 0 :(得分:1)

我认为这可能会让你感到害怕。 http://jsfiddle.net/Ckv5w/

我在这里使用无线电组。我根据所选的单选按钮更改隐藏字段的值,并将其显示在下面的div中。您可以随意使用相同的值。

HTML

<form>
    <input type="hidden" id="tab_indexer" value="" />
    <lable>
        <input type="radio" name="group1" id="tab_id" />
        One
    </lable><br/>
    <lable>
        <input type="radio" name="group1" id="tab_message" />
        Two
    </lable>
</form>
<div class="display"><p></p></div>

的jQuery

$(document).ready(function(){
$("input[type=radio]").on('click', function(){
    $("input[type=hidden]").attr("value", $(this).attr("id"));
    $(".display p").text($("input[type=hidden]").val());
});
});