搜索

首页  >  问答  >  正文

使用 JavaScript 根据元素 ID 更改复选框 CSS

我需要更改的 CSS

我正在寻找如何表达 .g > 输入 + span 和

如何将样式属性设置仅应用于 ID 以“S”开头的复选框元素。

.g > 输入 + span::before {font-weight:400;content: 'G';color:#000;display: block;text-align: center;position: Absolute ；左：0.36rem；上：0.12rem；}

.g4 > 输入 + span::before {font-weight:400;content: 'G4';color:#000;display: block;text-align: center;position: Absolute;left: 0.19rem；顶部：0.12rem；}

我想要一个不使用 CSS 变量的解决方案。

这不仅仅是一个 JS 和 CSS 问题。

这不是一个关于伪元素的问题

此页面不是静态的。

此应用程序中有超过 2,000 个复选框。

在任何给定时间点显示的复选框子集都是非常动态的。

HTML

<div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="C0081" class="chk" name="aC0081" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="C0083" class="chk" name="aC0083" value="3" /><span></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="C0082" class="chk" name="aC0082" value="2" /><span></span></label></div>
<div class="inline">&nbsp;Pyrethrum</div></div>
<div class="row">
<div class="dchk"><label class="e chk"> <input type="checkbox" id="S0171" class="chk" name="aS0171" value="1" /><span></span></label></div>
<div class="dchk"><label class="g4 chk"><input type="checkbox" id="S0173" class="chk" name="aS0173" value="3" /><span></span></label></div>
<div class="dchk"><label class="g chk"> <input type="checkbox" id="S0172" class="chk" name="aS0172" value="2" /><span></span></label></div>
<div class="inline">&nbsp;Quinoline Yellow (#10)</div></div>

说明

这些是医生订购化学过敏血液测试的订单输入复选框。

有些化学物质（ID以“S”开头）只能检测E型抗体

有一些化学物质（ID 以“C”开头）可以测试 E、G 和 G4 抗体。

示例

JS Fiddle 应用程序示例
只能检查 G 和 G4 中的胭脂树橙、鸢尾根、木瓜蛋白酶和除虫菊

未选中

已检查

我已经用这个JS禁用了“以“S”开头的ID的复选框G和G4：

JavaScript

const dc = ['S057','S021','S028','S058','S024','S042','S029','S013','S003','S072','S079','S034','S027','S082','S017','S085','S087','S093','S002','S015','S018','S090',]
for (id in dc){
   document.getElementById(dc[id] + '2').disabled = true;  // "2" is G
   document.getElementById(dc[id] + '3').disabled = true;  // "3" is G4
}

在此示例中，我想将喹啉黄 (#10) 的 G 和 G4 复选框的不透明度更改为 0.25

问题

虽然我可以禁用这些复选框，但我想通过使文本变暗来向医生表明 G 和 G4 选择不可用，例如“G”和“G4”。

我不知道如何用JS表达：.g > input + span::before{

此表达式中问号所在的位置会出现什么：

（或者其他可以使用的其他选择器）

document.getElementById(????????).style.opacity = 0.25;

如果您对如何执行此操作有任何其他想法，我可以完全控制更改 CSS、HTML 和 JS。

我尝试的上面的例子可能是不幸的，所以不要偏见地认为这就是它需要完成的方式。

该页面是用 PHP 生成的。

JS const dc 是在 PHP 中创建的。

当 id 以“S”开头时，我将该 ID 添加到 JS dc 数组中。

对于您能理解的任何新想法，我都有很大的灵活性。

if(substr($id,0,1) == 'S'){
  $js_dc .="'$code',";
}

完整复选框 CSS

.dchk{font:700 .8em Arial,sans-serif;display:inline-block;padding:0;margin:0;vertical-align: middle;position: relative;}
.dchk{text-align:left;}
.chk {margin: 0;display: inline-block;height:0;cursor: pointer;position: relative;}
.chk > span {color: #fff; padding: 0; margin:0; height:0; display: inline-block;}
.chk > input {height: 1.3em;width: 1.5em;margin:0 1px 0 1px;padding:4px 0 0 0 ;appearance: none; border: 1px solid #000;border-radius: 4px;outline: none;transition-duration: 0.4s;cursor: pointer;}
.chk > input:checked {border: 1px solid #000;}
.chk > input:checked + span::before {font-weight:700;content: '✓';color: #fff; display: block;text-align: center;position: absolute;left: 0.34rem;top: -0.02rem;}
.chk > input:active {border: 2px solid #000;}
.e  > input{background-color: #f7f7fb;}
.e  > input:checked{background-color: #f00;}
.e  > input + span::before {font-weight:400;content: 'E';color:#000;display: block;text-align: center;position: absolute;left: 0.44rem;top: 0.12rem;}
.g4 > input{background-color: #f7f7fb;}
.g4 > input:checked{background-color: #ff0;}
.g4 > input + span::before {font-weight:400;content: 'G4';color:#000;display: block;text-align: center;position: absolute;left: 0.19rem;top: 0.12rem;}
.g  > input{background-color: #f7f7fb;}
.g  > input:checked{background-color: #00f;}
.g  > input + span::before {font-weight:400;content: 'G';color:#000;display: block;text-align: center;position: absolute;left: 0.36rem;top: 0.12rem;}
.g,.e > input:checked + span::before {color: #fff;}
.g4 > input:checked + span::before {color: #000;}

P粉832212776P粉832212776340 天前394

全部回复(2)我来回复

  • P粉716228245

    P粉7162282452024-02-04 18:00:46

    我在这里学到的东西对我来说很有价值。谢谢。
    我确实创建了一个 JavaScript 例程来解决这个问题。

    链接到 JS Fiddle JavaScript 解决方案。

    但我没有使用它。
    我更喜欢 PHP/HTML 解决方案。
    我所有的 HTML 都是用 PHP 生成的

    这是我解决问题的方法。

    我向 <span> 添加了两个类（dim 和 disable），其样式看起来像复选框。

    生成复选框的 PHP：

    foreach($selected as $code => $types){
  $dim = '';
  $disable = '';
  if(substr($code,0,1) == 'S'){
    $dim = ' class="dim"';
    $disable = 'disabled';
  }
  if($types[0] == 5){echo '
    ' . $selected[$code][4] . "
    \n";$none = "
    No " . $selected[$code][4] . '
    ';continue;}
  if(strlen($code) < 4){continue;}
  echo "
    

    

    

    

     " . $types[4] . "
    \n";

}

    生成的 HTML：
    更改后的 HTML 类将添加到该行末尾的 span> 中。

    当复选框 id 以“C”开头时

    当复选框 id 以“S”开头时

    这里有两行，每行三个复选框。一份带有 C，一份带有 S

    

    

    

    

     Pyrethrum
    

    

    

    

    

     Quinoline Yellow (#10)

    回复
    0
  • P粉041758700

    P粉0417587002024-02-04 10:54:31

    您可以使用 document.querySelectorAll 来解决您的问题

    CSS

    .dim::before{
  opacity: 0.3; 
}

    然后，通过javascript为元素添加类

    var elements = document.querySelectorAll(".g  > input[id^=S] + span")
elements.forEach(element=>{
  element.className += " dim"
})
elements = document.querySelectorAll(".g4  > input[id^=S] + span")
elements.forEach(element=>{
  element.className += " dim"
})

    请参阅：https://jsfiddle.net/nfrap0hd/

    回复
    0
  • 取消回复