选中复选框时将文本更改为普通文本

Question

我是CSS和JavaScript的新手，我曾尝试将其从复选框更改为正常时的文本，但是我没有成功...最初，文本包含一些粗体字，但之后单击，所有短语都应设置为font-weight：正常...

<FORM>

        <input type="checkbox" name="adresa1 onClick="GetBold(this);" id="mail1"> adresa@expeditor.com - <B>Subiectbold daca email necitit</B> - data primire <BR>  
        <input type="checkbox" name="adresa" > joey@gmail.com - <B>Subiectbold daca email necitit</B> - data primire </a><BR>
        <input type="checkbox" name="adresa" > adresa@expeditor.com - <B>Subiectbold daca email necitit</B> - data primire <BR>

</FORM>

并且我使用了以下功能，但无法正常工作：

<script>
function GetBold(current)
{
  var array = document.getElementById("mail1");

  for (var i = 0; i < array.length; i++)
  {
    array[i].style.fontWeight = 'normal';
   }

  current.style.fontWeight = 'bold';
 }
</script>

Answer 1

您可以通过:checked伪类与相邻的兄弟组合器（ + ）轻松地使用CSS：

input[type=checkbox]:checked + b {
  font-weight: normal;
}

 input[type=checkbox]:checked + b { font-weight: normal; } 

 <FORM> <input type="checkbox" name="adresa1" id="mail1">adresa@expeditor.com - <b>Subiectbold daca email necitit</b> - data primire <br /> <input type="checkbox" name="adresa">joey@gmail.com - <b>Subiectbold daca email necitit</b> - data primire <br /> <input type="checkbox" name="adresa">adresa@expeditor.com - <b>Subiectbold daca email necitit</b> - data primire <br /> </FORM> 

另外，从属性值中删除尾随空格； 也是没有用处的，在一个的情况下， id ， #elementID不匹配<a id="elementID "> ，其积极作用是复杂的事情。

参考文献：

• 相邻的兄弟（ + ）组合器 。
• 属性值（ [attribute=value] ）选择器 。
• :checked 。

Answer 2

由于您是您所说的初学者，因此您首先应该尝试执行以下操作：

<form>
        <input type="checkbox" name="adresa1" onClick="GetBold(this);" id="mail1"> adresa@expeditor.com - <label id="lbl1">Subiectbold daca email necitit</label> -data primire <BR> 
</form>


<script>
function GetBold(current)
{
    var checkB= document.getElementById(current.id);
    var labelText = document.getElementById("lbl1");

if(checkB.checked)
    labelText.style.fontWeight = 'bold';
else
        labelText.style.fontWeight = 'normal';
 }
</script>

然后，当您了解其工作原理后，在CSS中创建两个类，因为用html装饰文本（使用标签）不是很好，更好的选择是创建两个这样的类：

<style>
.normal{
font-weight:normal;
}
.bold{
font-weight:bold;
}
</style>

然后在javascript中获取要更改的所有元素（使用getElementsByTagName）：

function GetBold(current)
{
  var checkB = document.getElementById(current.id);
 var array = document.getElementsByTagName("label"); //get all label tags from html

  for (var i = 0; i < array.length; i++)
  {
    array[i].className = "normal"; //changing class from css for all yours labels
   }
 }

您要更改的所有文本都应在标签标签中：

<input type="checkbox" name="adresa1" onClick="GetBold(this);" id="mail1"> adresa@expeditor.com - <label class="bold">Subiectbold daca email necitit</label> - data primire <BR>  
    <input type="checkbox" > joey@gmail.com - <label class="bold">Subiectbold daca email necitit</label> - data primire <BR> 
    <input type="checkbox" name="adresa"> adresa@expeditor.com - <label class="bold">Subiectbold daca email necitit</label> - data primire <BR> 

请注意，存在类名“ bold”而不是标签，该类名将在上述javascript函数中更改