How to show hidden field when a check box or radio buttons are checked?

Question

I have a form with some radio buttons and checkboxes. Some checkboxes/radio have some hidden dividers next to them. The hidden dividers should only become visible when a user select the corresponding radio/checkbox.

Each radio/checkbox has a value in this format 123:456 the corresponding hidden divider will have an id attribute equal to group_123_456

I am able to find the divider id's value that I needs to visible/hide from the value of each item (checkbox or radio.)

I thought I can get a way by utilizing the change() event. I thought I can evaluate each item. If the item is check, show the corresponding div otherwise hide it.

Here is what I have done

$("input[type='radio'], input[type='checkbox']").change(function(e) {
    $(this).each(function(index, item){
        var newGroupName = '';
        if( $(item).is(':checked') ){
            console.log( $(item).val() + ' is checked' );
            newGroupName = getGroupElement( $(this).val() );
            $('#' + newGroupName).show();
        } else {
            console.log( $(item).val() + ' is NOT checked' );
            newGroupName = getGroupElement( $(this).val() );
            $('#' + newGroupName).hide();
        }
    });
}).change();

The above code works for the checkboxes but it does not work for the radio buttons.

I create a fiddle to give you a good idea of what I am trying to do here https://jsfiddle.net/oke8qLwg/2/

How can I show/hide the correct divider everytime the use change the input's value?

https://jsfiddle.net/oke8qLwg/

Here might be the answer for you... http://stackoverflow.com/questions/5176803/jquery-radiobutton-change-not-firing-during-de-selection — Beengie, Dec 08 '15 at 17:36
@Beengie thank you for that hint. isn't this how to bind the change every on all the radio buttons regardless of the name `$("input[type='radio'], input[type='checkbox']").change(function(e) {` ? — Junior, Dec 08 '15 at 17:43
yes, but I do see a problem with your code... the end .change() doesn't need to be there since you are using .change as your function call. Remove the end and fire it up in a browser and look at your console. You should get an error if the syntax is wrong. — Beengie, Dec 08 '15 at 17:46
@Beengie actually i need the change() at the end so that way on the page load the event is fired. every time the page reload, I need to hide/show the correct dividers. Otherwise how would I hide/show on reload? — Junior, Dec 08 '15 at 17:57
Gotcha. I didn't know if you wanted that firing. It's only the hide that is not working. It should be straight forward to see your variables in the console in the browser and see what your selecting in jQuery and what your target is your trying to hide — Beengie, Dec 08 '15 at 18:03
@Beengie The problem is that the change() event does not fire when unchecking a radio button. this is why the show is working but the hide is not. I need to find a way to hide the correct divider. Is there a beforeChange event where I can either copy the value before the change so I can use that to hide? — Junior, Dec 08 '15 at 18:05
Your other radio buttons will fire the event. What about saying that if there is any other radio button selected, that one if it has the textbox, will then be hidden? — Beengie, Dec 08 '15 at 18:13

Junior · Accepted Answer · 2015-12-08T18:35:28.287

Here is what I did to correct this problem

$(":radio").change(function(e) {

        var name = $(this).attr('name');

        $('input[name='+name+']').each(function(index, item){
            applyLogic(item);
        });
});

$(":checkbox").change(function(e) {
        applyLogic( $(this) );
});


function applyLogic(item)
{

    var newGroupName = getGroupElement( $(item).val() );

    if( $(item).is(':checked') ){

        $('#' + newGroupName).show();

    } else {

        $('#' + newGroupName).hide();
    }

}

every time a radio button is change, I loop through the buttons that have the same input name, then I apply the show/hide logic.

How to show hidden field when a check box or radio buttons are checked?

1 Answers1