Check / Uncheck Checkbox multiple times ! PROP

100%

Check / Uncheck Checkbox multiple times ! PROP

✓ Published0🌍 Public

Last edited Sep 5, 2013

Created on Sep 5, 2013

This example demonstrates a form control that reflects whether an ID appears in a preselected list, toggling a checkbox’s checked state each time the user interacts with it. The code parses a JSON-encoded array of duplicate IDs from the server-side model, then uses `jQuery.inArray` to test membership and sets the `prop('checked', true/false)` accordingly. The behavior is driven entirely by the `#isDuplicate` checkbox, whose state updates based on the presence of the selected ID in the provided data. No animation or complex rendering is involved; the visualization relies on jQuery’s attribute manipulation and the browser’s native checkbox handling.

AI-generated description

Similar vizzes

Loading thumbnail…

Simple custom CheckBox component for Vue.js, compatible with v-model.

This example demonstrates a custom CheckBox component for Vue.js that integrates seamlessly with `v-model` for both single-value and array-based (multi-select) bindings. The component uses Vue’s `model` option, `props` like `value`, `modelValue`, `trueValue`, and `falseValue`, and emits a `change` event to update the bound data. It renders a stylized checkbox with hidden native input, custom `checkmark` styling via scoped PostCSS, and supports hover and checked states with a green accent color. The code shows array handling through `includes`, `push`, and `splice` methods.

KKopylovVitalik

55% match

Loading thumbnail…

One unfilled rectangle

This example demonstrates how D3.js can manipulate existing DOM elements and their properties. It starts with a simple HTML div containing a checkbox, then uses D3 selections to change the div’s border style to a dark gray dashed pattern and reassigns its ID attribute. The checkbox’s checked property is also set to true via D3’s property method. The visualization highlights D3’s ability to integrate with static HTML and dynamically update both CSS styles and element attributes, using the d3.v4 library directly in the browser without any external data sources or complex rendering.

IIgathi

54% match

Loading thumbnail…

Javascript

This example demonstrates a collection of JavaScript utilities for enhancing web page interactivity, focusing on user-input controls and navigation. It shows how keyboard and click events can be managed to prevent accidental data loss and to streamline table or list interactions. The code uses plain JavaScript with jQuery for DOM manipulation, including the `bind` method for event handling, `history.pushState` for URL updates without page reloads, and jQuery’s `prop` and `is` methods to toggle checkbox states. The snippets cover F5 key disabling, dynamic URL changes, and bulk selection of checkboxes, reflecting a typical admin-panel or form-heavy workflow.

IIliaIdakiev

53% match

Loading thumbnail…

Test

This example demonstrates a reusable D3 checkbox component that can be configured with custom sizes, positions, colors, and checked states. Three checkboxes are rendered on an SVG canvas, and clicking them updates a text label to display their boolean statuses. The implementation defines a `d3CheckBox` factory function that builds interactive SVG elements with rectangular boxes and path-based check marks, using D3 version 3’s `d3.svg.line()` for the mark geometry. A click event toggles opacity and triggers a callback showing how the component supports custom interaction logic.

PPhilip Rago

52% match

Loading thumbnail…

binary-param

This example interactively demonstrates binary-to-Base64 encoding through a row of 500 checkboxes, where each checkbox represents a single bit. Toggling any checkbox updates the displayed binary string, its Base64 encoding, and the decoded binary output. The implementation uses D3.js selections and event handlers to manage the checkboxes, while custom JavaScript functions perform the conversion between binary arrays and a custom Base64 alphabet string.

11wheel

51% match

Loading thumbnail…

dc.js checkbox

This example uses dc.js row charts and bar charts with crossfilter to create interactive checkbox-style filters. The row chart renders two square bars labeled "A" and "B", which act as checkboxes for filtering the dataset by index type. A separate dc.barChart displays the count of records for each index (Idx 1, 2, and 3) from a CSV file containing Index and Year columns. Filtering is applied through crossfilter dimensions, and the bar chart updates its counts accordingly while the row chart's fixed-size bars use a value accessor to maintain their checkbox appearance.

KKatiRG

50% match

Loading thumbnail…

D3.js Graph with Checkbox (Dynamic)

This example shows a dynamic multi-line chart where each line corresponds to a data column, toggled on and off via checkboxes. Using D3.js v6, it renders SVG paths for three series (`rt1`, `rt2`, `rt3`) against a linear mass scale, with a color scale based on `d3.schemeCategory10`. The checkboxes are generated from the data keys, and the `on("change")` handler updates line visibility by toggling the `display` attribute. The data is hardcoded in the script.

Ffofana1984

49% match

Loading thumbnail…

Splash animation with checkboxes

This example demonstrates a playful splash animation triggered by user interaction. A checkbox input, hidden via CSS, controls a series of animations when checked. The code uses HTML checkboxes, CSS transitions, and keyframe animations to create a mustard bottle that shakes and a paint splatter image that scales and fades over eight seconds. The splatter image is loaded from an external URL and rendered with a mix-blend-mode overlay effect, while the label element acts as a clickable toggle.

SStefan Gerrits

49% match