This time I will share jQuery Plugin and tutorial about Show/hide Elements With Form Controls – jQuery Conditional Fields, hope it will help you in programming stack.
Conditional Fields is a small jQuery plugin that shows/hides form fields (or any HTML elements) based on values in other form controls.
How to use it:
1. Download and load the jquery.conditional-fields.js script after jQuery.
2 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin="anonymous"> |
5 |
<script src="jquery.conditional-fields.js"></script> |
2. Initialize the plugin on document ready and we’re ready to go.
2 |
$('body').conditionalFields('init'); |
3. Create trigger controls and conditional elements using the following CSS classes and HTML data attributes:
- .condition-trigger: trigger selector
- data-condition: specifies which condition to check on
- data-condition-value: specifies the value of the condition
02 |
<input type="radio" name="radioExample" class="condition-trigger" value="0" id="option1" checked> radio1 |
05 |
<input type="radio" name="radioExample" class="condition-trigger" value="1" id="option2"> radio2 |
08 |
<input type="radio" name="radioExample" class="condition-trigger" value="2" id="option3"> radio3 |
10 |
<div data-condition="radioExample" data-condition-value="0"> |
11 |
<p>First radio content</p> |
13 |
<div data-condition="radioExample" data-condition-value="0;1"> |
14 |
<p>Second radio content</p> |
16 |
<div data-condition="radioExample" data-condition-value="2"> |
17 |
<p>Thrid radio content</p> |
4. The plugin also supports AND and OR logical operation.
1 |
<div data-condition="conditions[]" condition-logical-and data-condition-value="1"> |
4 |
<div data-condition="conditions[]" condition-logical-or data-condition-value="1"> |
This awesome jQuery plugin is developed by ArthurShlain. For more Advanced Usages, please check the demo page or visit the official website.
