Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

Question

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

When multiple checkboxes are selected by the user, corresponding form fields should appear based on the checkboxes. For example, if both flight and hotel checkboxes are checked, then the full name and last name fields should be displayed while other fields remain hidden.

I attempted to implement a toggle method to hide/show fields when a checkbox is checked, but I am facing challenges in selecting multiple fields together and hiding others. Additionally, I need my checkboxes to be aligned horizontally using CSS, but it's not functioning as expected.

javascript html css

Answer 1

Answer №1

Take a look at this condensed and generalized CSS-only solution for toggling form fields conditionally with checkboxes:

.form__field {
display: block;
}
[class*="--checkbox"] {
display: inline-block;
}
[data-conditional] {
display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
display: block;
}
#hotel:checked ~ [data-conditional*="hotel"] {
display: block;
}
#travel:checked ~ [data-conditional*="travel"] {
display: block;
}

<form action="mailto:?subject=Travel Pre-approval Form " method="POST" enctype="text/plain" id="travel-form" onsubmit="test1()">

<input class="form__input form__input--checkbox" type="checkbox" id="flight" />
<label class="form__field form__field--checkbox" for="flight">
<span class="form__label">Flight</span>
</label>

<input class="form__input form__input--checkbox" type="checkbox" id="hotel" />
<label class="form__field form__field--checkbox" for="hotel">
<span class="form__label">Hotel</span>
</label>

<input class="form__input form__input--checkbox" type="checkbox" id="travel" />
<label class="form__field form__field--checkbox" for="travel">
<span class="form__label">Travel</span>
</label>

<label class="form__field form__field--text" data-conditional="flight hotel">
<span class="form__label">Full Name:</span>
<input class="form__input" type="text"  placeholder="Full Name as per Passport" />
</label>

<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of travel:</span>
<input class="form__input" type="date" />
</label>

<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of arrival:</span>
<input class="form__input" type="date" />
</label>

<label class="form__field form__field--text" data-conditional="flight">
<span class="form__label">For Flight only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<label class="form__field form__field--text" data-conditional="hotel">
<span class="form__label">For Hotel only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<label class="form__field form__field--text" data-conditional="travel">
<span class="form__label">For Travel only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<div class="form__field form__field--submit">
<button type="submit">Submit</button>
</div>
</form>

My checkboxes should be aligned horizontally.

The code snippet provided above satisfies the horizontal alignment of the checkboxes.

By using checkboxes to toggle form fields based on the data-conditional attribute, we can control which fields are displayed. The key technique here is the general next sibling selector in CSS combined with specific HTML markup.

Additional fields have been included at the end of the form to demonstrate how the conditional filtering works for individual checkboxes.

Answer 2

Take a look at this condensed and generalized CSS-only solution for toggling form fields conditionally with checkboxes:

.form__field {
display: block;
}
[class*="--checkbox"] {
display: inline-block;
}
[data-conditional] {
display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
display: block;
}
#hotel:checked ~ [data-conditional*="hotel"] {
display: block;
}
#travel:checked ~ [data-conditional*="travel"] {
display: block;
}

<form action="mailto:?subject=Travel Pre-approval Form " method="POST" enctype="text/plain" id="travel-form" onsubmit="test1()">

<input class="form__input form__input--checkbox" type="checkbox" id="flight" />
<label class="form__field form__field--checkbox" for="flight">
<span class="form__label">Flight</span>
</label>

<input class="form__input form__input--checkbox" type="checkbox" id="hotel" />
<label class="form__field form__field--checkbox" for="hotel">
<span class="form__label">Hotel</span>
</label>

<input class="form__input form__input--checkbox" type="checkbox" id="travel" />
<label class="form__field form__field--checkbox" for="travel">
<span class="form__label">Travel</span>
</label>

<label class="form__field form__field--text" data-conditional="flight hotel">
<span class="form__label">Full Name:</span>
<input class="form__input" type="text"  placeholder="Full Name as per Passport" />
</label>

<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of travel:</span>
<input class="form__input" type="date" />
</label>

<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of arrival:</span>
<input class="form__input" type="date" />
</label>

<label class="form__field form__field--text" data-conditional="flight">
<span class="form__label">For Flight only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<label class="form__field form__field--text" data-conditional="hotel">
<span class="form__label">For Hotel only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<label class="form__field form__field--text" data-conditional="travel">
<span class="form__label">For Travel only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<div class="form__field form__field--submit">
<button type="submit">Submit</button>
</div>
</form>

My checkboxes should be aligned horizontally.

The code snippet provided above satisfies the horizontal alignment of the checkboxes.

By using checkboxes to toggle form fields based on the data-conditional attribute, we can control which fields are displayed. The key technique here is the general next sibling selector in CSS combined with specific HTML markup.

Additional fields have been included at the end of the form to demonstrate how the conditional filtering works for individual checkboxes.

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

Answer №1

Similar questions

What could be causing the Gruntfile to throw an error?

Move to the top of the page when the next action is activated

The callback function within the Service does not execute just once when utilizing $timeout

Leveraging React hooks to combine an array and an object within an array

Incorporate 'Additional features' into the Navbar when adjusting window size

Instructions for manipulating and displaying a source array from a child component using Vue

JavaScript method to clear a variable

Tips for deactivating the highlight on a previously selected menu item when clicking on the next menu option in Angular.js

Using jQuery to toggle the visibility of div elements while displaying an indicator

From dividing into three sections to splitting into two sections

Implementing a callback function following the completion of file reading in Phonegap

The Datejs library is experiencing issues following an upgrade to jQuery 3.x

Confusion arises from conflicting Vue component script indentation guidelines

Using JavaScript to dynamically load Cascading Style Sheets based on the current

Using values from a designated line within the textarea to successfully submit a GET form

What is the preferred convention for defining AngularJS directives as "attributes" versus "elements"?

Ways to retrieve the final appearance of element m in array n

How to ensure two unordered lists are aligned at the same baseline using CSS

Exploring the power of ES6 map function within React stateless components

Launching a URL in a pop-up window with customized title and address bar