Here i am giving an example to create flip checkbox using HTML, CSS and JavaScript in Oracle APEX.
In this example, we will create a flip checkbox using HTML and CSS and will assign a value 'Y' if the checkbox is checked and 'N' if the checkbox is unchecked to a page item using JS.
Follow below steps to achieve this,
Step 1: Create Static Region and do copy and paste below code into source section.
HTML and CSS code:
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 0 5px;
}
.cmn-toggle {
position: absolute;
margin-left: -9999px;
visibility: hidden;
}
.cmn-toggle + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
input.cmn-toggle-yes-no + label {
width: 200px;
height: 40px;
}
input.cmn-toggle-yes-no + label:before,
input.cmn-toggle-yes-no + label:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 40px;
border-radius:15px;
}
input.cmn-toggle-yes-no + label:before {
background-color: #b8b8b8;
content: attr(data-off);
transition: transform 1s;
backface-visibility: hidden;
border-radius:15px;
}
input.cmn-toggle-yes-no + label:after {
background-color: #2196F3;
content: attr(data-on);
transition: transform 1s;
transform: rotateY(180deg);
backface-visibility: hidden;
border-radius:15px;
}
input.cmn-toggle-yes-no:checked + label:before {
transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label:after {
transform: rotateY(0);
}
.cmn-toggle cmn-toggle-yes-no
{
border-radius :20px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<input id="cmn-toggle-optiona" class="cmn-toggle cmn-toggle-yes-no"
type="checkbox" name="P4_OPTION_A" onclick="optionaFunction()">
<label for="cmn-toggle-optiona" data-on="Option A" data-off="Option A">
</label>
</td>
<br/>
<tr>
<td>
<input id="cmn-toggle-optionb" class="cmn-toggle cmn-toggle-yes-no"
type="checkbox" name="P4_OPTION_B" onclick="optionbFunction()">
<label for="cmn-toggle-optionb" data-on="Option B" data-off="Option B">
</label>
</td>
<tr/>
<br/>
<tr>
<td>
<input id="cmn-toggle-optionc" class="cmn-toggle cmn-toggle-yes-no"
type="checkbox" name="P4_OPTION_C" onclick="optioncFunction()">
<label for="cmn-toggle-optionc" data-on="Option C" data-off="Option C">
</label>
</td>
<tr/>
<br/>
<tr>
<td>
<input id="cmn-toggle-optiond" class="cmn-toggle cmn-toggle-yes-no"
type="checkbox" name="P4_OPTION_D" onclick="optiondFunction()">
<label for="cmn-toggle-optiond" data-on="Option D" data-off="Option D">
</label>
</td>
</tr>
</table>
</body>
</html>
Step 2: Create a hidden items as below.
Step 3: Do copy and paste below JS code into "Function and Global Variable Declaration" section as below,
JavaScript Code:
function optionaFunction() {
var checkBox = document.getElementById("cmn-toggle-optiona");
if (checkBox.checked == true) {
apex.item('P4_OPTION_A').setValue('Y');
} else {
apex.item('P4_OPTION_A').setValue('N');
}
}
function optionbFunction() {
var checkBox = document.getElementById("cmn-toggle-optionb");
if (checkBox.checked == true) {
apex.item('P4_OPTION_B').setValue('Y');
} else {
apex.item('P4_OPTION_B').setValue('N');
}
}
function optioncFunction() {
var checkBox = document.getElementById("cmn-toggle-optionc");
if (checkBox.checked == true) {
apex.item('P4_OPTION_C').setValue('Y');
} else {
apex.item('P4_OPTION_C').setValue('N');
}
}
function optiondFunction() {
var checkBox = document.getElementById("cmn-toggle-optiond");
if (checkBox.checked == true) {
apex.item('P4_OPTION_D').setValue('Y');
} else {
apex.item('P4_OPTION_D').setValue('N');
}
}
Step 4: Create Button with submit action.
Step 5: Create PL/SQL procedure to store item values into table. Call this procedure, when you click on submit button.
The demo is here
That's it. Happy APEXing!!!...
Comments
Post a Comment