將刪除線添加到選中的複選框

我試圖在我的表單（Bootstrap v3）中選中複選框時添加刪除線。我這個編碼bootply：將刪除線添加到選中的複選框

<div class="form-group "> 
    <label for="inputName" class="col-md-1 control-label">select</label> 
    <div class="col-md-5"> 
     <div class="checkbox"> 
      <label><input type="checkbox" name="packersOff" class="strikethrough" value="1">sssssssss</label> 
     </div> 
    </div> 
</div>

，並在CSS

.strikethrough:checked{ 
    text-decoration:line-through; 
}

增加一類，但它不工作..

來源

2015-06-22 yaylitzis

我沒有空間，我在這裏寫錯了。我編輯了這個問題 – yaylitzis

你在哪裏試圖添加一個罷工？輸入或文字？ – Andrew

您是否正在尋找Javascript解決方案？ – odedta

問題是，你嘗試在複選框適用line-through的地方文本在標籤內。你可以用文本中<span>內，改變它的CSS上:checked

<div class="checkbox"> 
    <label> 
     <input type="checkbox" name="packersOff" class="strikethrough" value="1"> 
     <span>sssssssss</span> 
    </label> 
</div> 




.strikethrough:checked + span{ 
    text-decoration:line-through 
}

Bootply

來源

2015-06-22 08:53:20

.strikethrough:checked + .strikeThis { 
 
    text-decoration: line-through 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="form-group "> 
 
    <label for="inputName" class="col-md-1 control-label">select</label> 
 
    <div class="col-md-5"> 
 
    
 
     <input name="packersOff" class="strikethrough" value="1" type="checkbox"> 
 
     <label for="packersOff" class="strikeThis">sssssssss</label> 
 
    
 
    </div> 
 
</div>

來源

2015-06-22 08:54:42

的:checked CSS僞類選擇代表任何無線電（<input type="radio">），複選框（<input type="checkbox">）或選項（）在<select>）元素，該元素被檢查或切換到開啓狀態。用戶可以通過單擊該元素或選擇不同的值來更改此狀態，在這種情況下：已檢查的僞類不再使用適用於此元素，但將適用於相關的元素。

來源：https://developer.mozilla.org/en-US/docs/Web/CSS/%3Achecked

爲了使其工作，重新安排你的HTML：

<div class="form-group "> 
    <label for="inputName" class="col-md-1 control-label">select</label> 
    <div class="col-md-5"> 
     <div class="checkbox"> 
      <input name="packersOff" class="strikethrough" value="1" type="checkbox"> 
      <label for="packersOff">sssssssss</label> 
     </div> 
    </div> 
</div>

和你的CSS：

.strikethrough:checked + label { 
    text-decoration:line-through 
}

DEMO。

來源

2015-06-22 08:55:00 LinkinTED

這裏是一個解決方案，通過把一擊，當你輸入時檢查：

HTML：

<div class="form-group "> 
    <label for="inputName" class="col-md-1 control-label">select</label> 
    <div class="col-md-5"> 
     <div class="checkbox"> 
      <input type="checkbox" name="packersOff" value="1"/> 
      <label class="strikethrough">sssssssss</label> 
     </div> 
    </div> 
</div>

CSS

input[type=checkbox]:checked + label.strikethrough{ 
    text-decoration: line-through; 
}

JSFIDDLE

有了這個解決方案時，曾經複選框被選中，它會對標籤做些什麼。所以你可以讓它變大膽或者如果你想要改變它的顏色。

來源

2015-06-22 08:57:32 Andrew

jQuery的解決方案：

$('#packersOff').change(function() { 
 
    if ($('#packersOff').prop('checked')) { 
 
    $('#test').css('text-decoration','line-through'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group "> 
 
\t <label for="inputName" class="col-md-1 control-label">select</label> 
 
    <div class="col-md-5"> 
 
\t \t <div class="checkbox"> 
 
      <label for="packersOff" id="test">sssssssss</label> 
 
      <input type="checkbox" name="packersOff" id="packersOff" class="strikethrough" value="1" /> 
 
     </div> 
 
    </div> 
 
</div>

來源

2015-06-22 08:59:21 odedta

這爲我工作。

li.my-item:hover span { visibility: visible; } 
li.my-item span { visibility:hidden; }

來源

2017-07-17 06:15:28 Faheem

將刪除線添加到選中的複選框

回答

相關問題