HTML Checkbox onchange hidden field

StackOverflow https://stackoverflow.com/questions/21558842

Question

i have the following page:

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

So, what i need is to, as the user changes the checked checkbox, the value on the hidden field changes as well. Also, when the page loads, it must set the checkbox referent on the hidden field as checked.

Was it helpful?

Solution

I think this might hep you. http://jsfiddle.net/Ckv5w/

Here I am using the radio group for the purpose. I am changing the value of your hidden field according to the radio button selected and displaying it in the div below. You can use the same value where ever you want.

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());
});
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top