[Resolved] Radio buttons show different elements

[Author]

Posts

[RafaelL7560]

Hello,

can I possibly query the radio buttons that have just been clicked? For example, there are 2 radio buttons and Radio Button 1 should display something specific and click on Radio Button 2 should display something else. Is this perhaps possible?

Thanks.

[Luo Yang]

Hello,

I assume you are going to setup such kind of effect in the front-end of a wordpress page.

If it is, that will need some custom JS codes, I suggest you follow Jquery document to setup the JS codes:
hidden link

See similar thread:
https://stackoverflow.com/questions/5940963/show-and-hide-divs-based-on-radio-button-click

[RafaelL7560]

Hello,

Thank you for the link.

I did it with a custom post field and use the filter in the view so that I get this line of code:
[wpv-control-postmeta field="wpcf-industry" type="radios" url_param="wpv-wpcf-industry"]

There are 2 radio buttons and I would like to know which one is selected. Is it similar to the JS code or does it have to be queried more specifically?

Thanks.

[Luo Yang]

In most case, you can use Jquery attribute selector to locate the specific radio field, see Jquery document:
hidden link

And it needs custom JS codes, please share a live page link, that will help us to find the answer. thanks

[RafaelL7560]

Thank you.

the link: hidden link

It is about the two radio buttons "Brachenübergreifend" and "Branchenspezifisch". By clicking on the radio button "Branchenspezifisch" the checkboxes below should be displayed, otherwise they should be hidden.

[Luo Yang]

You can use the attribute "value" to locate the radio button, for example:
1) Wrap all the checkboxes fields into a HTML div tag:

<div class="my-div">
Here display the checkboxes fields
</div>

2) Add below JS codes to your view:

jQuery(document).ready(function($) {
    $("input[value='Branchenübergreifend']").click(function(e) {
        $("div.my-div").show();
    });
    $("input[value='Branchenspezifisch']").click(function(e) {
        $("div.my-div").hide();
    });
});

More help:
Adding custom JavaScript to Views
https://toolset.com/documentation/user-guides/adding-custom-javascript-views/

[RafaelL7560]

Great, it's working. Thank you so much for your help. 🙂

[RafaelL7560]

If I have the same example with checkboxes, can I display several more checkboxes at the same time? And as soon as I deactivate a checkbox, that the other checkboxes are hidden again? So show at the first click and hide at the second click.

For example:
$("input[value=' ']").click(function(e) {
$("div.my-div").hidden();
});

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/split-radio-buttons-show-different-elements/

[Luo Yang]

For the new question: same example with checkboxes ...
Please move to the new thread here:
https://toolset.com/forums/topic/split-radio-buttons-show-different-elements/

[RafaelL7560]

Thanks for your help 🙂