Show/Hide 2 (REQUIRED) Form Fields based on Checkbox

Question

Okay, I am attempting to show 2 form fields based on a checkbox selection. These 2 form fields are required. So basically when the checkbox is selected I need to show the fields and have them required. Otherwise their hidden and thus not required. I've got the show hide sorta working. It doesn't reliably hide on deselection (selection of another checkbox in the group). Also when they are hidden they are still required so I get a nice error...

I'm stuck. Anyone with a suggestion. I'm still pretty new. Thanks in advance. Here's what I have below:

    <label for="nothing">
    Test Method<br/>
    <label>
        <input type="checkbox" class="testmethod" id="kickback" name="kickback" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['kickback'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
            Kickback
    </label>
    <label>
        <input type="checkbox" class="testmethod" id="manual" name="manual" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['manual'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
            Manual
    </label>
    <label>
        <input type="checkbox" class="testmethod" id="beastmode" name="beastmode" value="yes" onclick="javascript:yesnoCheck();" tabindex="5" <?= ( $settings['beastmode'] == 'yes' ? 'checked = "checked"' : '' ) ?>>
            Beast Mode
    </label>                
</label>
    <label for="my-text-field" id="mytextfield" style="visibility:hidden">
    My Text Field <em>&nbsp;<small>*Required*</small></em>
    <input type="text" name="mytextfield" value="<?= $settings['mytextfield'] ?>" tabindex="6" required/>
</label>

<label for="my-number-field" id="mynumberfield" style="visibility:hidden">
    Number of Images <em>&nbsp;<small>*Required*</small></em>
    <input type="number" name="mynumberfield" value="<?= $settings['mynumberfield'] ?>" tabindex="7" required/>
</label>    

And here's my JS

$("input.testmethod").click(function() {

$('input:checkbox[class="' + $(this).attr('class') + '"]').prop('checked', false);
$(this).prop('checked', true);

});

function yesnoCheck() {
if (document.getElementById('beastmode').checked) 
{
    document.getElementById('mytextfield').style.visibility = 'visible'
    document.getElementById('mynumberfield').style.visibility = 'visible';        
}
else
{
    document.getElementById('mytextfield').style.visibility = 'hidden';
    document.getElementById('mynumberfield').style.visibility = 'hidden';  
} 

}

Answer 1

Try to clarify your question, i've a hard time understanding what you want. Does my-text-field and my-number-field value has to be based on the checked input value ?

Ok, this should work.

$("#beastmode").click(function () {
if ($(this).prop('checked') === true) {
    $('#mytextfield').show();
    $('#mynumberfield').show();
    $('input[name="mytextfield"]').prop('required',true);
    $('input[name="mynumberfield"]').prop('required',true);
} else {
    $('#mytextfield').hide();
    $('#mynumberfield').hide();
    $('input[name="mytextfield"]').prop('required',false);
    $('input[name="mynumberfield"]').prop('required',false);        
}
});

and the fiddle http://jsfiddle.net/n67Mf/1/

I just closed some tag and remove some unnecessary code.