Show text field only if checkbox is checked?

Yes, the general form is:
markup:

<input type="checkbox" id="my_checkbox">
<span>Some text</span>

css:

#my_checkbox[type="checkbox"] + span {
  display: none;
}
#my_checkbox[type="checkbox"]:checked + span {
  display: inline-block;
}

I can see how that would work for some plain text. I think I was unclear in my question…

What I have is a checkbox input field and I have a text input field. I want the text input field “Inscription” to only show if the customer first checks the checkbox. The way your plugin wraps each of your fields in a table and an unordered list, the CSS “+” is not going to work because it only applies to what is directly following the first selector.

Do you have another solution?

When css isn’t suitable, the method would be to use Javascript or JQuery and add an onclick() call or a listener to the checkbox. The listener calls a Javascript function which toggles the css display property of the text input field between none and block. The Javascript needs to be loaded in the page. The elements to be toggled best need to have ids so they can be identified, in-turn this means the html may need to be tweaked as well.

If you don’t have developer skills, consider posting a job:
https://jobs.wordpress.net/
Bids can be every competitive and you are not obliged to accept any.

Ah … of course ??

If anyone else is interested, this is what I did:

CSS

.wccpf_fields_table.inscription-wrapper {
    display: none;
}

jQuery

jQuery('.wccpf-field').click(function() {
  jQuery('.wccpf_fields_table.inscription-wrapper')[this.checked ? "show" : "hide"]();
});

Note: .inscription-wrapper is the name of my input field that is not visible until the checkbox is clicked.

Note: I added the above jQuery to a JS file (tweaks.js) that I added to WordPress via my child theme’s functions.php using the enqueue method:

/* Enqueue Scripts */
function my_scripts_method() {
  wp_enqueue_script('tweaks', get_stylesheet_directory_uri() .'/assets/tweaks.js', array('jquery'), '1.0', false);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

• This reply was modified 7 years, 1 month ago by trishahdee.

Just thought of something… This works because I am only using this for one checkbox. If there are multiple checkboxes then there would be a problem. I tried identifying the checkbox using the name field like this:

jQuery('input[name=supplied]').click(function() { ...

but the name your plugin gives the field is: name="signed_by_author_free[]" so the brackets at the end confuse the code.

Is there a reason for your adding these end brackets? Can they be removed?

The brackets define the name as an array. You’d need to hack the code to remove them, but then every item would need a different name. Sounds like it could become a lot of work.

I’m not on the plugin team. The author dives in if there is a bug but tends not to contribute to customisation request posts.

The author has posted some documentation on the way it all works if you fancy coding your own.

I just reviewed the checkbox creation area and realized there is a CSS class that can be added to the field ?? That will work for this purpose.

Thank you for your help and quick replies!