Show Or Hide A Field Using Jquery Or Ajax

I am new to jQuery and I want to know how to show the date field on a form after a click(select) on the check box and hide it after unselecting it. Below is the screenshot. - Thank

Solution 1:

HTML

<labelfor="chkEle">Check This</label><inputtype="checkbox"name="chkEle" /><divid="divEle"style="display:none;"><datestuff></div>

JS

$("input[name=chkEle]").change(function(e) {
    $("#divEle").toggle();
});

.change is triggered even if the label is clicked instead of the checkbox. This also allows you to dynamically make change in js later. For instance if you wanted to force the checkbox selection on page load, then at the end of you code you could add $("input[name=chkEle]").change(); and that would trigger the change both on the back end and visually

Solution 2:

Just replace the selectors with whatever your appropriate ones are:

$('checkbox_selector').click(function ()
{
    $('date_field_selector').toggle();
});

Solution 3:

$('#checkBox').click(function() {
    $('#dateBox')[this.checked ? "show" : "hide"]();
});