Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
choozedisplay-js
Advanced tools
choozedisplay-js
A jQuery plugin for dynamically displaying content based on user selections from checkboxes, radio buttons, or select dropdowns.
ChoozeDisplay jQuery Plugin
Overview
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.
Table of Contents
Requirements
To use the ChoozeDisplay jQuery Plugin, you need the following dependencies:
- jQuery (minimum version 3.7.0)
You can include these dependencies in your HTML file via CDN or by downloading the files locally.
Features
- Dynamically show or hide content based on checkbox, radio button, or select dropdown selections.
- Easy to configure using both JavaScript and HTML data attributes.
- Supports multiple conditions and actions.
- Lightweight and easy to integrate with existing jQuery projects.
Installation
To use the ChoozeDisplay jQuery Plugin in your project, you can include the necessary files via npm, CDN, or by downloading the files locally.
npm
You can install ChoozeDisplay via npm:
npm install choozedisplay-js
CDN
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>
Local Download
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>
Usage
To use the ChoozeDisplay jQuery Plugin, follow these steps:
- Include the necessary scripts as described in the installation section.
- Create input elements and the target divs in your HTML.
- Initialize ChoozeDisplay with the option object or data attributes:
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();
});
Example
<!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>
Options
| 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. |
Demo
Here's a
Demo example:
Contributing
Contributions are always welcome!
If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request.
Author
License
FAQs
A jQuery plugin for dynamically displaying content based on user selections from checkboxes, radio buttons, or select dropdowns.
The npm package choozedisplay-js receives a total of 0 weekly downloads. As such, choozedisplay-js popularity was classified as not popular.
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.
Package last updated on 12 Jun 2024
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.
Related posts
Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
By Sarah Gooding - Feb 04, 2025
Research
Security News
Go Supply Chain Attack: Malicious Package Exploits Go Module Proxy Caching for Persistence
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
By Kirill Boychenko - Feb 04, 2025