Question

我是CSS和JavaScript的新手，我已经尝试将文本从复选框更改为正常状态，但是我没有成功... 在开头，文本包含一些粗体字，但在点击之后，所有短语都应设置为font-weight：normal ...

<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 ">不匹配，这会使事情复杂化。

参考文献：

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”而不是tag，在上面提到的javascript函数中将更改相同的类名

选中复选框后，将文本更改为正常

2 个答案: