function setError(input, message) {
const form = input.parentElement;
const small = form.querySelector('small');
small.innerText = message;
form.className = 'inputfield error';
}
function setSuccess(input) {
const form = input.parentElement;
form.className = 'inputfield success';
}
Here is my JavaScript code for setting error or success to the input fields. It is working fine for the inputs.
but when I am trying to apply the same code for custom select boxes it is not working. I am new to web development so any sort of help would be appreciated.
reference Input Field Code :
<div class="inputfield">
<label>NID</label>
<input type="text" value="" class="input" id="nid" onkeyup="checkNid()">
<small>Error Message</small>
</div>
reference Custom Select Code :
<div class="inputfield">
<label>Gender</label>
<div class="custom_select">
<select name="gender" id="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Others">Others</option>
</select>
</div>
<small>Error Message</small>
</div>
Here is the output. I am expecting the same sort of error message for the select fields too:
output
Replace your reference Custom Select Code with this:
<div>
<label>Gender</label>
<div class="inputfield custom_select">
<select name="gender" id="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Others">Others</option>
</select>
<small>Error Message</small>
</div>
</div>
If you had shared your CSS file, I would have suggested how to style it better.
.wrapper .form .inputfield .custom_select {
position: relative;
width: 100%;
height: 37px;
}
.wrapper .form .inputfield .custom_select:before {
content: '';
position: absolute;
top: 12px;
right: 10px;
border: 8px solid;
border-color: #d5dbd9 transparent transparent transparent;
pointer-events: none;
}
.wrapper .form .inputfield .custom_select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
width: 100%;
height: 100%;
border: 0px;
padding: 8px 10px;
font-size: 15px;
border: 1px solid #d5dbd9;
border-radius: 3px;
}
helere is the css for the custom selection
Related
I'm studying HTML, CSS, and Javascript at w3schools and I'm wondering how I can get data from info placed in text fields and print them using the alert function at the press of a button. (I'm currently developing a form for COVID contact tracing.
As for now, my form works; it can send data to a server for processing. It also has an alert pop-up that says, "Form Data submitted successfully!" But I want to change the pop-up to list the data that you have inputted. How can I do that?
(for reference, you can see my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Trebuchet, Arial; text-align: center;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 99%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 50px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 12px;
resize: horizontal;
}
h3 {
font-family: Tahoma;
color: black;
text-align: center;
font-size: 30px;
}; /* Form Title Font */
{
background-color: #003cff;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
input[type=submit] {
background-color: #003cff;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* Button's initial colors */
input[type=submit]:hover {
background-color: #003bcf;
} /* The button changing color when hovered upon */
.container {
border-radius: 5px;
background-color: #fcfcfc;
padding: 90px;
} /* The box's colors */
</style>
</head>
<body>
<div class="container">
<form action="/action_page.php">
<h3>Contact Tracing Form</h3>
<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname" placeholder="Input your first name">
<label for="middlename">Middle Name</label>
<input type="text" id="middlename" name="middlename" placeholder="Input your middle name">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Input your last name">
<label for="region">Region</label>
<select id="region" name="region">
<option value="Empty">Select Region...</option>
<option value="NCR">NCR</option>
<option value="CAR">CAR</option>
<option value="R1">Region 1 (Ilocos Region)</option>
<option value="R2">Region 2 (Cagayan Valley)</option>
<option value="R3">Region 3 (Central Luzon)</option>
<option value="R4">Region 4-A (Calabarzon)</option>
<option value="STR">Southwestern Tagalog Region (Mimaropa)</option>
<option value="R5">Region 5 (Bicol Region)</option>
<option value="R6">Region 6 (Western Visayas)</option>
<option value="R7">Region 7 (Central Visayas)</option>
<option value="R8">Region 8 (Eastern Visayas)</option>
<option value="R9">Region 9 (Zamboanga Peninsula)</option>
<option value="R10">Region 10 (Northern Mindanao)</option>
<option value="R11">Region 11 (Davao Region)</option>
<option value="R12">Region 12 (Soccsksargen)</option>
<option value="R16">Region 16 (Caraga)</option>
<option value="BARMM">BARMM (Bangsamoro)</option>
<option value="None">I don't live in the Philippines</option>
</select>
<label for="subject">Full Address</label>
<textarea id="subject" name="subject" style="height:50px"></textarea>
<input type="submit" value = "Submit Form" onclick="myFunction()"></button>
<script>
function myFunction() {
alert("Form Data submitted successfuly!");
} // Pop-up script
</script>
</form>
</div>
</body>
</html>
Thanks!
First, you need to select the input fields you want by using JS:
let firstName = document.getElementById("firstname");
Use the .value Property to extract the text:
const firstNameData = firstName.value;
Do this for all the input fields.
Change the OnClick function to as follows:
function showAlert(){
alert(`Form Data submitted successfuly!\n
First Name: ${firstNameData}`);
}
This is formatted strings in JavaScript.
Example:
const siteName = "Stack Overflow";
console.log(`I love ${siteName}!`)
At the moment I have to select a value from the drop down list and then click the button Items Per Page. I don't want to have to click the Items Per Page button. I want to embed the functionality from the Items Per Page button into the 4 options (3,6,9,12) in the Select element.
<form method="GET">
<input class="btn btn-primary mb-4 height" type="submit" value="Items Per Page">
<select class="btn btn-outline-primary mb-4 height" name="paginate_by" id="">
<option value="3">3 </option>
<option value="6">6 </option>
<option value="9">9 </option>
<option value="12">12 </option>
</select>
</form>
I have had a couple of attempts (including the two below) and don't think any of them have been remotely close.
<option value="3" type="submit">3 </option>
<option class="btn btn-primary mb-4 height" value="6">6 </option>
I Googled the issue but did not find anything remotely along the right lines. Does anyone have any suggestions or links to documentation?
Problem Solved
I resolved my problem with onchange="javascript:this.form.submit()". The below code works perfectly.
<div class ="example" style="display: inline-block" ><div style="text-align:center"> <form method="GET">
<input class="btn btn-primary mb-4 height" type="submit" value="Items Per Page">
<select class="btn btn-outline-primary mb-4 height" name="paginate_by" id="ItemsPerPage" onchange="javascript:this.form.submit()">
<option value="3">3 </option>
<option value="6">6 </option>
<option value="9">9 </option>
<option value="12">12 </option>
</select>
</form>
</div></div>
I learnt about onchange="javascript:this.form.submit()" from Larrys post (How to Submit Form on Select Change).
Here is one when you select any value(number) JavaScript detects the value(number) you selected and it create elements based on the value(number) and append them in the DOM
so it's up to you to customize the contents div
const select = document.getElementsByTagName('select')[0];
const container = document.getElementById('container');
select.onchange = () => {
container.innerHTML = "";
for (let i = 0; i < Number(select.value); i++) {
let content = document.createElement('div');
content.classList.add('content');
container.appendChild(content);
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.app {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 12% 88%;
background: #5F9EA0;
}
select {
width: 100px;
height: 50px;
background: red;
color: #fff;
font-size: 24px;
border-radius: 10px;
outline: none;
}
#container {
width: 100%;
height: 100%;
background: darkcyan;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.content {
width: 150px;
height: 150px;
border-radius: 15px;
background: darkgreen;
margin: 10px;
}
<div class="app">
<select class="nothing">
<option>0</option>
<option>3</option>
<option>6</option>
<option>9</option>
</select>
<div id="container"></div>
</div>
if this doesn't answer your question please let me know if there could be any farther support
Post Edited: Using MutationObserver instead of DOMSubtreeModified
I have a div where I am using .each to go through every label and get their text, but I'd like to add an additional ifelse statement where if the label includes a select child, add the selected option to the text string
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
var target = document.querySelector('#droppable')
var observer = new MutationObserver(function(mutations) {
var str = "";
$('#droppable label').each(function(){
str += $(this).text() + "<br>";
document.getElementById("inside_drop_zone").innerHTML = str
});
})
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label><select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label><select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>
Desired Output
label OR label : selected option
ONE + ":" + week 1
THREE
TWO + ":" + week 3
I'm pretty new to JQuery so thank you for any help/tips!
Look for lines marked // changed
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
$("body").on('DOMSubtreeModified', "#droppable", function() {
var str = "";
$('#droppable label').each(function() {
const txt = $(this).text() // changed
const val = $(this).parent().find("select").children("option:selected").val() // changed - the main idea is to get parent() of $(this) and then search for <select>
str += txt + (val ? ":" + val : "") + "<br>"; // changed
})
document.getElementById("inside_drop_zone").innerHTML = str
});
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label>
<select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label>
<select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>
I have a form with select:
<select name="work_days" id="id_work_days" multiple="multiple">
<option value="1">sun</option>
<option value="2">mon</option>
<option value="3">tue</option>
<option value="4">wed</option>
<option value="5">thu</option>
<option value="6">fri</option>
<option value="7">sat</option>
</select>
I would like to render this form field as a group of buttons by means of css and javascript (see screenshot)
I tried to display it as
<input type="button" name="work_days" value="sun">
<input type="button" name="work_days" value="mon">
<input type="button" name="work_days" value="tue">
<input type="button" name="work_days" value="wed">
...
but I couldn't get and validate data from this form on the backend. Select widget would serve the best, but I have no idea how to display it as buttons.
I would be grateful for an idea or an example.
you can style the options in the select element
#id_work_days{
height: 44px;
border: none;
overflow: hidden;
}
#id_work_days::-moz-focus-inner {
border: 0;
}
#id_work_days:focus {
outline: none;
}
#id_work_days option{
width: 60px;
font-size: 1.2em;
padding: 10px 0;
text-align: center;
margin-right: 20px;
display: inline-block;
cursor: pointer;
border:rgb(204, 204, 0) solid 1px;
border-radius: 5px;
color: rgb(204, 204, 0);
}
<select name="work_days" id="id_work_days" multiple>
<option value="1">sun</option>
<option value="2">mon</option>
<option value="3">tue</option>
<option value="4">wed</option>
<option value="5">thu</option>
<option value="6">fri</option>
<option value="7">sat</option>
</select>
I suggest to use checkbox over select, you'll be able to style buttons fully with a bit of CSS tricks.
#id_work_days input[type="checkbox"] {
display: none;
}
#id_work_days span {
display: inline-block;
padding: 10px;
text-transform: uppercase;
border: 2px solid gold;
border-radius: 3px;
color: gold;
}
#id_work_days input[type="checkbox"]:checked + span {
background-color: gold;
color: black;
}
<p id="id_work_days">
<label><input type="checkbox" name="work_days" value="1"><span>sun</span></label>
<label><input type="checkbox" name="work_days" value="2"><span>mon</span></label>
<label><input type="checkbox" name="work_days" value="3"><span>tue</span></label>
<label><input type="checkbox" name="work_days" value="4"><span>wed</span></label>
<label><input type="checkbox" name="work_days" value="5"><span>thu</span></label>
<label><input type="checkbox" name="work_days" value="6"><span>fri</span></label>
<label><input type="checkbox" name="work_days" value="7"><span>sat</span></label>
</p>
I am trying to reduce the opacity of a table (with class="test") whenever a checkbox that is within the table is checked. For some reason, only the checkbox itself fades. I don't understand what I'm doing wrong. My code is below. Thanks for the help.
table.test input[name="delete_record[]"]:checked {
opacity: 0.5;
}
<table class="test" cellpadding="10" cellspacing="0" align="center" bgcolor="#9CDEEC" border="0" style="margin-bottom: 16px;border-radius: 4px;border: 1px solid #555555;">
<!-- Transactions table -->
<tbody>
<tr>
<td>
<input style="width: 90px;" type="text" class="datepicker" name="date[]" required="" value="01/09/1970">
</td>
<td>
<input type="text" name="payee[]" required="" value="Hateful!">
</td>
<td rowspan="2" align="left" valign="top">
<a title="Memo: They're customer service is astounding.">
<textarea rows="3" style="text-align: left; border: 1px solid #AAAAAA; width: 200px; background-color: #FFFFFF; padding: 3px;" name="memo[]">They're customer service is astounding.</textarea>
</a>
</td>
<td>
<select name="reconciled[]">
<option value="R" selected="selected">R</option>
<option value=""></option>
<option value="C">C</option>
<option value="R">R</option>
</select>
</td>
<td>
<input style="width: 100px; text-align: right;" type="number" step="0.01" name="deposit[]" size="4" min="0" max="100000000" value="">
</td>
<td>
<input style="width: 100px; text-align: right;" type="number" step="0.01" name="withdrawal[]" size="4" min="0" max="100000000" value="37.00">
</td>
<input type="hidden" name="record_id[]" value="95">
<td rowspan="2" align="center" valign="middle">
<input type="checkbox" name="delete_record[]" value="95">
</td>
</tr>
<tr>
<td>
<input style="width: 60px;" placeholder="Check #" type="number" step="1" min="0" max="1000000000" name="check_number[]" value="110">
</td>
<td>
<select name="category[]" style="width: 200px;">
<option value="1" selected="selected">Business: Advertising</option>
<option value="42">Business</option>
<option value="1">Business: Advertising</option>
<option value="2">Business: Assets</option>
<option value="24">Business: Automotive: Auto Insurance</option>
<option value="25">Business: Automotive: Auto Loan</option>
<option value="26">Business: Automotive: Repairs</option>
<option value="27">Business: Automotive: Fuel</option>
<option value="28">Business: Automotive: Parking and Tolls</option>
<option value="29">Business: Automotive: Registration</option>
<option value="30">Business: Automotive: Vehicle Leasing</option>
<option value="31">Business: Automotive: Wash and Road Services</option>
<option value="3">Business: Commissions and Fees</option>
<option value="4">Business: Contract Labor</option>
<option value="23">Business: H.S.A. Contrbutions</option>
<option value="22">Business: Health Insurance Premiums</option>
<option value="10">Business: Home Office Other Expenses</option>
<option value="12">Business: Home Office Rent and Lease</option>
<option value="37">Business: Home Office Repairs and Maintenence</option>
<option value="5">Business: Insurance</option>
<option value="32">Business: Interest Paid: Business Loan</option>
<option value="33">Business: Interest Paid: Business Mortgage</option>
<option value="34">Business: Interest Paid: Credit Card</option>
<option value="35">Business: Interest Paid: Home Office Mortgage</option>
<option value="6">Business: Legal and Professional Services</option>
<option value="7">Business: Materials and Supplies</option>
<option value="8">Business: Meals and Entertainment</option>
<option value="9">Business: Office Expenses</option>
<option value="11">Business: Rent and Lease</option>
<option value="36">Business: Repairs and Maintenence</option>
<option value="13">Business: Taxes and Licenses: Licenses</option>
<option value="14">Business: Taxes and Licenses: Property Tax</option>
<option value="15">Business: Taxes and Licenses: Estimated Taxes</option>
<option value="16">Business: Taxes and Licenses: Federal Tax</option>
<option value="17">Business: Taxes and Licenses: Home Office Property Tax</option>
<option value="18">Business: Taxes and Licenses: State Tax</option>
<option value="19">Business: Travel</option>
<option value="20">Business: Utilities: Utilities</option>
<option value="21">Business: Utilities: Home Office Utilities</option>
<option value="43">Personal</option>
<option value="51">Personal: Automotive</option>
<option value="52">Personal: Charity and Donations</option>
<option value="53">Personal: Child Care</option>
<option value="54">Personal: Clothing</option>
<option value="55">Personal: Education</option>
<option value="56">Personal: Entertainment</option>
<option value="48">Personal: Furnishings</option>
<option value="63">Personal: Gift</option>
<option value="44">Personal: Groceries</option>
<option value="47">Personal: Health and Fitness</option>
<option value="57">Personal: Home Maintenance and Repairs</option>
<option value="50">Personal: Insurance</option>
<option value="58">Personal: Medical</option>
<option value="59">Personal: Mortgage</option>
<option value="49">Personal: Pets</option>
<option value="60">Personal: Property Tax</option>
<option value="61">Personal: Rent</option>
<option value="46">Personal: Resturants</option>
<option value="62">Personal: Travel and Vacation</option>
<option value="45">Personal: Utilities</option>
<option value="38">Transfer: Bank to Bank</option>
<option value="39">Transfer: Credit Card Payment</option>
<option value="40">Transfer: Owner's Deposit</option>
<option value="41">Transfer: Owner's Withdrawal</option>
</select>
</td>
<td colspan="3" align="right" valign="middle" style="padding-right: 20px;">
<!-- Accounts Selector -->
<select name="bank_account[]">
<option value="19">Chroot Checking</option>
<option value="10">Main Checking</option>
<option value="19">Chroot Checking</option>
</select>
</td>
</tr>
</tbody>
</table>
As you can't change the parent's opacity using CSS, you would need to use JavaScript.
document.querySelector('input[name="delete_record[]').addEventListener('click', function() {
var d = document.querySelector('table.test');
if(this.checked) {
d.style.opacity = 0.5;
} else {
d.style.opacity = 1;
}
});
This toggles the opacity as well.
Example here.
To only affect the parent table, and using a class to toggle as suggested by #abluejelly, you could do:
document.querySelector('input[name="delete_record[]').addEventListener('click', function() {
var d = this.parentNode.parentNode.parentNode; // the table
d.classList.toggle('halfOpacity', this.checked);
});
You would need a CSS class:
.halfOpacity {
opacity: 0.5;
}
for that to work.
Example here.
If you have multiple tables though you would need to try something like:
var tables = document.querySelectorAll('input[name="delete_record[]');
for(var i = 0, l = tables.length; i < l; i++) {
tables[i].addEventListener('click', function() {
var d = this.parentNode.parentNode.parentNode; // the table
d.classList.toggle('halfOpacity', this.checked);
});
}
which loops through all your tables and assigns the click event listener to the checkboxes.
Example here.
This will reduce the table opacity whenever a checkbox that is within the table is checked.
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var table = document.querySelector('table.test');
var oneIsChecked = false;
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].addEventListener("click", function(e) {
oneIsChecked = false;
for(var j=0; j<checkboxes.length; j++){
if(checkboxes[j].checked) {
oneIsChecked = true;
break;
}
}
if(oneIsChecked){
table.style.opacity = 0.5;
}else{
table.style.opacity = 1;
}
});
}
table.test input[name="delete_record[]"]:checked
This selector says: match a checked input element with its name attribute set to "delete_record[]", that is a descendant of a table element with class test. Put simply, this CSS selector refers to your input element, not your table element (which is one of its parents instead).
For a pure CSS-based solution you would need a "has-descendant" or "has-child" operator, which is unfortunately not supported in CSS3. You will therefore need to resort to JavaScript and watch for when your input changes, then progammatically set opacity (or whatever you need):
document.querySelector('input[name="delete_record[]"]')[0].addEventListener('change', function () {
var tableElement = document.querySelector('table.test')[0];
if (this.checked) {
tableElement.style.opacity = 0.5;
} else {
tableElement.style.opacity = 1;
}
});
You will of course also need to match the initial table opacity to the initial checked state of your input.
Note however, that opacity is effectively inherited from a visual perspective.
Your checkbox is only fading because that is what your CSS selector is targeting.
Unfortunately, CSS cannot do what you're asking. You can only target elements that are preceded by others, not followed by.
You can use other methods to conditionally apply a class to your table and style it accordingly. jQuery is a simple solution, but the best option depends on what languages you're using.
You can do it simply using CSS as well, follow the below instructions:
step #1: copy and paste the below code in a separate file to see the result, then use it for your own purpose.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #001925;
}
.list {
padding: 30px 75px 10px 30px;
position: relative;
background: #042b3e;
border-top: 50px solid #03a9f4;
}
.list h2 {
color: #fff;
font-size: 30px;
padding: 10px 0;
margin-left: 10px;
display: inline-block;
border-bottom: 4px solid #fff;
}
.list label {
position: relative;
display: block;
margin: 40px 0;
color: #fff;
font-size: 24px;
cursor: pointer;
}
.list input[type="checkbox"] {
-webkit-appearance: none;
}
.list i {
position: absolute;
top: 0;
display: inline-block;
width: 25px;
height: 25px;
border: 2px solid #fff;
left: 0;
}
.list input[type="checkbox"]:checked ~ i {
top: 1px;
border-top: none;
border-right: none;
height: 15px;
width: 25px;
transform: rotate(-45deg);
}
.list span {
position: relative;
left: 40px;
transition: 0.5s;
}
.list span:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: translateY(-50%) scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.list input[type="checkbox"]:checked ~ span:before {
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.list input[type="checkbox"]:checked + span {
opacity: 0.2;
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
opacity: 0.2;
}
<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Check List</title>
</head>
<body>
<div class="list">
<h2>Check list in HTML & CSS</h2>
<label>
<input type="checkbox" name="">
<span>HTML stand for Hyper text markup language</span>
<i></i>
</label>
</div>
</body>
</html>
In jQuery you can do something like
if ($('input[name="delete_record[]"]').is(':checked')) {
$('table.test').css('opacity', 0.5);
}
$('input[name="delete_record[]"]').click(function(){
$(this).is(':checked')) {
$('table.test').css('opacity', 0.5);
}
});