選中復選框時將文本更改為普通文本

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函數中更改