choozedisplay-js
Advanced tools
A jQuery plugin for dynamically displaying content based on user selections from checkboxes, radio buttons, or select dropdowns.
ChoozeDisplay is a flexible jQuery plugin that dynamically displays content based on user selections from checkboxes, radio buttons, or select dropdowns. This plugin allows developers to create interactive and responsive web applications with minimal effort.
To use the ChoozeDisplay jQuery Plugin, you need the following dependencies:
You can include these dependencies in your HTML file via CDN or by downloading the files locally.
To use the ChoozeDisplay jQuery Plugin in your project, you can include the necessary files via npm, CDN, or by downloading the files locally.
You can install ChoozeDisplay via npm:
npm install choozedisplay-js
You can also include ChoozeDisplay directly from a CDN by adding the following script tag to your HTML file:
<script src="https://cdn.jsdelivr.net/npm/choozedisplay-js@latest/dist/ChoozeDisplay.min.js"></script>
If you prefer to host the library locally, you can download the latest release from the source code and include it in your project:
<script src="path/to/ChoozeDisplay.min.js"></script>
To use the ChoozeDisplay jQuery Plugin, follow these steps:
HTML:
<!-- Checkbox Input -->
<div class="container mt-3 bg-light p-5 rounded">
<h2 class="mb-3">Choose your favorite Sports:</h2>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="football">
<label class="form-check-label" for="football">Football</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="basketball">
<label class="form-check-label" for="basketball">Basketball</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="tennis">
<label class="form-check-label" for="tennis">Tennis</label>
</div>
</div>
<!-- Radio Input -->
<div class="container mt-3 bg-light p-5 rounded">
<h2 class="mb-3">Choose your preferred OS:</h2>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="os" id="windows" value="windows">
<label class="form-check-label" for="windows">Windows</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="os" id="macos" value="macos">
<label class="form-check-label" for="macos">MacOS</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="os" id="linux" value="linux">
<label class="form-check-label" for="linux">Linux</label>
</div>
</div>
<!-- Select Input -->
<div class="container mt-3 bg-light p-5 rounded">
<h2 class="mb-3">Select your Favorite Fruit:</h2>
<select class="form-select mb-3" aria-label="Favorite Fruit" id="fruits">
<option selected>Select fruit...</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</div>
<div class="container mt-5 bg-light p-5 rounded">
<div class="alert alert-secondary" id="apple-football-windows-info" style="display:none;">Selecting Apple, and Football is good with Windows.</div>
<div class="alert alert-success" id="apple-football-macos-info" style="display:none;">Selecting Apple, and Football is good with macOS.</div>
<div class="alert alert-danger" id="apple-basketball-windows-info" style="display:none;">Selecting Apple, and Basketball is good with Windows.</div>
<div class="alert alert-warning" id="apple-basketball-macos-info" style="display:none;">Selecting Apple, and Basketball is good with macOS.</div>
<div class="alert alert-info" id="banana-football-windows-info" style="display:none;">Selecting Banana, and Football is good with Windows.</div>
<div class="alert alert-light" id="banana-football-macos-info" style="display:none;">Selecting Banana, and Football is good with macOS.</div>
<div class="alert alert-dark" id="banana-basketball-windows-info" style="display:none;">Selecting Banana, and Basketball is good with Windows.</div>
<div class="alert alert-primary" id="banana-basketball-macos-info" style="display:none;">Selecting Banana, and Basketball is good with macOS.</div>
<div class="alert alert-secondary" id="orange-football-windows-info" style="display:none;">Selecting Orange, and Football is good with Windows.</div>
<div class="alert alert-success" id="orange-football-macos-info" style="display:none;">Selecting Orange, and Football is good with macOS.</div>
<div class="alert alert-danger" id="orange-basketball-windows-info" style="display:none;">Selecting Orange, and Basketball is good with Windows.</div>
<div class="alert alert-warning" id="orange-basketball-macos-info" style="display:none;">Selecting Orange, and Basketball is good with macOS.</div>
</div>
JavaScript:
$(document).ready(function() {
const options = {
triggerControls: [
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#apple-football-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#apple-football-macos-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#apple-basketball-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#apple-basketball-macos-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'banana' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#banana-football-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'banana' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#banana-football-macos-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state
: 'checked' },
{ type: 'select', id: 'fruits', value: 'banana' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#banana-basketball-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'banana' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#banana-basketball-macos-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'orange' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#orange-football-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'orange' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#orange-football-macos-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'orange' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#orange-basketball-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'basketball', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'orange' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#orange-basketball-macos-info'
}
]
};
// Initialize the plugin with options object
$(document).ChoozeDisplay(options);
// Initialize the plugin to read from attributes
$('[data-target]').ChoozeDisplay();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ChoozeDisplay - Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- Checkbox Input -->
<div class="container mt-3 bg-light p-5 rounded">
<h2 class="mb-3">Choose your favorite Sports:</h2>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="football">
<label class="form-check-label" for="football">Football</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="basketball">
<label class="form-check-label" for="basketball">Basketball</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="tennis">
<label class="form-check-label" for="tennis">Tennis</label>
</div>
</div>
<!-- Radio Input -->
<div class="container mt-3 bg-light p-5 rounded">
<h2 class="mb-3">Choose your preferred OS:</h2>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="os" id="windows" value="windows">
<label class="form-check-label" for="windows">Windows</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="os" id="macos" value="macos">
<label class="form-check-label" for="macos">MacOS</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="radio" name="os" id="linux" value="linux">
<label class="form-check-label" for="linux">Linux</label>
</div>
</div>
<!-- Select Input -->
<div class="container mt-3 bg-light p-5 rounded">
<h2 class="mb-3">Select your Favorite Fruit:</h2>
<select class="form-select mb-3" aria-label="Favorite Fruit" id="fruits">
<option selected>Select fruit...</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</div>
<div class="container mt-5 bg-light p-5 rounded">
<div class="alert alert-secondary" id="apple-football-windows-info" style="display:none;">Selecting Apple, and Football is good with Windows.</div>
<div class="alert alert-success" id="apple-football-macos-info" style="display:none;">Selecting Apple, and Football is good with macOS.</div>
<div class="alert alert-danger" id="apple-basketball-windows-info" style="display:none;">Selecting Apple, and Basketball is good with Windows.</div>
<div class="alert alert-warning" id="apple-basketball-macos-info" style="display:none;">Selecting Apple, and Basketball is good with macOS.</div>
<div class="alert alert-info" id="banana-football-windows-info" style="display:none;">Selecting Banana, and Football is good with Windows.</div>
<div class="alert alert-light" id="banana-football-macos-info" style="display:none;">Selecting Banana, and Football is good with macOS.</div>
<div class="alert alert-dark" id="banana-basketball-windows-info" style="display:none;">Selecting Banana, and Basketball is good with Windows.</div>
<div class="alert alert-primary" id="banana-basketball-macos-info" style="display:none;">Selecting Banana, and Basketball is good with macOS.</div>
<div class="alert alert-secondary" id="orange-football-windows-info" style="display:none;">Selecting Orange, and Football is good with Windows.</div>
<div class="alert alert-success" id="orange-football-macos-info" style="display:none;">Selecting Orange, and Football is good with macOS.</div>
<div class="alert alert-danger" id="orange-basketball-windows-info" style="display:none;">Selecting Orange, and Basketball is good with Windows.</div>
<div class="alert alert-warning" id="orange-basketball-macos-info" style="display:none;">Selecting Orange, and Basketball is good with macOS.</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="path/to/ChoozeDisplay.min.js"></script>
<script>
$(document).ready(function() {
const options = {
triggerControls: [
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'windows', state: 'checked' }
],
action: 'show',
target: '#apple-football-windows-info'
},
{
conditions: [
{ type: 'checkbox', id: 'football', state: 'checked' },
{ type: 'select', id: 'fruits', value: 'apple' },
{ type: 'radio', name: 'os', value: 'macos', state: 'checked' }
],
action: 'show',
target: '#apple-football-macos-info'
},
// Add the rest of the configurations here...
]
};
// Initialize the plugin with an option object
$(document).ChoozeDisplay(options);
// Initialize the plugin to read from attributes
$('[data-target]').ChoozeDisplay();
});
</script>
</body>
</html>
| Option | Type | Description |
|---|---|---|
triggerControls | Array | An array of objects defining the conditions and target elements for showing or hiding content. |
conditions | Array | An array of condition objects, each defining the type of input, ID or name, value, and state to match. |
action | String | The action to perform when the conditions are met (show or hide). |
target | String | The selector for the target element to show or hide. |
Here's a
Demo example:
Contributions are always welcome!
If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request.
FAQs
A jQuery plugin for dynamically displaying content based on user selections from checkboxes, radio buttons, or select dropdowns.
We found that choozedisplay-js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.