选中复选框时降低父级的不透明度
Reducing Opacity of Parent When Checkbox is Checked
每当选中表中的复选框时,我都会尝试降低表的不透明度(使用 class="test"(。出于某种原因,只有复选框本身会褪色。我不明白我做错了什么。我的代码如下。感谢您的帮助。
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>
由于您无法使用 CSS 更改父级的不透明度,因此需要使用 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;
}
});
这也切换了不透明度。
这里的例子。
要仅影响父表,并按照@abluejelly的建议使用类进行切换,您可以执行以下操作:
document.querySelector('input[name="delete_record[]').addEventListener('click', function() {
var d = this.parentNode.parentNode.parentNode; // the table
d.classList.toggle('halfOpacity', this.checked);
});
你需要一个CSS类:
.halfOpacity {
opacity: 0.5;
}
为此,才能发挥作用。
这里的例子。
如果您有多个表,则需要尝试如下操作:
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);
});
}
它会循环遍历所有表,并将 Click 事件侦听器分配给复选框。
这里的例子。
每当选中表中的复选框时,这将降低表的不透明度。
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
这个选择器说:匹配一个选中的input
元素,其name
属性设置为"delete_record[]"
,即具有类test
的table
元素的后代。简而言之,这个CSS选择器指的是你的输入元素,而不是你的表元素(它是它的父元素之一(。
对于一个纯粹的基于CSS的解决方案,你需要一个"has-descendant"或"has-child"运算符,不幸的是,CSS3不支持该运算符。因此,您需要求助于 JavaScript 并观察输入何时发生变化,然后以编程方式设置不透明度(或任何您需要的内容(:
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;
}
});
当然,您还需要将初始表不透明度与输入的初始检查状态相匹配。
但请注意,从视觉角度来看,不透明度是有效的继承的。
您的复选框只会褪色,因为这是您的 CSS 选择器的目标。
不幸的是,CSS不能做你所要求的。您只能定位前面有其他元素的元素,而不能定位后面的元素。
可以使用其他方法有条件地将类应用于表并相应地设置其样式。 jQuery是一个简单的解决方案,但最佳选择取决于您使用的语言。
您也可以简单地使用 CSS 进行操作,请按照以下说明操作:
步骤#1:将以下代码复制并粘贴到单独的文件中以查看结果,然后将其用于自己的目的。
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>
在jQuery中,你可以做类似的事情
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);
}
});
- 关闭在加载时激活,而不是复选框更改
- 如何使用template.find()来选中或不选中复选框
- 如果在使用IE 7或8时隐藏,则单击标签不选中复选框
- 使用隐藏字段值而不是复选框值计算合计
- 复选框提醒脚本在动态加载测试时不记得复选框状态.php其中包含复选框
- "全部检查”;不选中复选框
- 将值从一个表单字段复制到另一个,不带复选框
- 单击不使用复选框标记的事件
- 为不确定复选框设置自定义初始值只有在单击后才能工作
- 如何更改此代码以显示带有菜单下拉菜单而不是复选框的隐藏表单
- 引导弹出窗口不保存复选框
- jQuery触发器('click')不触发复选框上的.click事件
- 如何使不确定复选框触发其他复选框的功能
- :空白选择器不工作复选框jQuery Validate()
- Javascript不击中复选框
- 改变事件不触发复选框,如果它是由javascript设置的
- 不确定复选框的Knockout自定义绑定不起作用
- 在Firefox中,click()设置后不运行复选框.Disabled = false
- KnockoutJS不选择复选框列表中的选中值
- 是否可以在单击标签时不触发复选框?