創建一個像html複選框一樣的div

我想打開/關閉點擊div（它應該像html複選框一樣）並使用css進行可見的更改。這可能沒有Javascript，或者我必須使用Javascript？創建一個像html複選框一樣的div

如果您已經創建了這樣的腳本，請分享它。

非常感謝您的幫助。

2011-04-02 Php Beginner

這是不可能沒有JavaScript（除非你發送每一個點擊作爲鏈接到服務器，並使用PHP來修改div - 我希望你不想這樣做）。我不會推薦這樣做，除非您真的無法使用複選框來完成此操作，因爲這會使網站對未啓用JavaScript的用戶無法使用。 – Czechnology 2011-04-02 12:45:20

其實你可以通過將一個真實的複選框放在另一個元素上，並給它0％的不透明度，並根據需要設置一個高度和寬度來做到這一點。然而，基於複選框狀態來做視覺事情將依賴瀏覽器對「：checked」僞類的支持，我認爲這仍然是有限的。 – Pointy 2011-04-02 12:51:04

那麼你必須使用JavaScript，它是保守的簡單。你只需要改變CSS的風格的行動。

<a href='javascript: toggle()'>toggle</a> 
<div id='div1' style='display:none'> 
Don't display me 
</div> 

<script> 
function toggle(){ 
    var div1 = document.getElementById('div1') 
    if (div1.style.display == 'none') { 
     div1.style.display = 'block' 
    } else { 
     div1.style.display = 'none' 
    } 
} 
</script>

來源

2011-04-02 12:48:25 heroix

我一直在試圖回答你的問題，我創建了一個小小的jQuery（1.5.2）代碼。希望這可以幫助你看看，並告訴我這是你在找什麼？或者如果你想要別的東西我也可以做到。在這個腳本上點擊一個div元素，其ID爲on_off（你也可以通過使用var！來選擇它）和class（on_off_on）和off（on_off_off），以及你可以選擇它們的方式，只需要到這個jsFiddle鏈接對於 live demo或者你可以看到下面的腳本 -

HTML -

<html> 
    <head> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script> 
    </head> 
    <body> 
      <div id="on_off" class="on_off_on" >ON</div> 
    </body> 
</html>

CSS -

div.on_off_off 
{ 
background: rgb(150,110,120); 
font-family: segoe ui; 
font-size: 12px; 
font-weight: bold; 
padding: 5px 10px; 
border: 3px solid rgb(180, 140, 150); 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
color: #fff; 
display: inline; 
} 
div.on_off_on 
{ 
background: rgb(110,150,120); 
font-family: segoe ui; 
font-size: 12px; 
font-weight: bold; 
padding: 5px 10px; 
border: 3px solid rgb(140, 180, 150); 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
color: #fff; 
display: inline; 
}

jQuery代碼 -

$(document.body).ready(function() { 
    $(function() { 

     var main_obj_id = 'on_off'; 
     var on_class = 'on_off_on'; 
     var off_class = 'on_off_off';   

     $('#' + main_obj_id).click(function() { 
       if ($(this).is('.' + on_class)) { 

       $(this).removeClass(on_class); 
       $(this).addClass(off_class); 
       $(this).html('OFF'); 

       } else { 

       $(this).removeClass(off_class); 
       $(this).addClass(on_class); 
       $(this).html('ON');     

       } 
     }); 
    }); 
});

希望這會有所幫助！

來源

2011-04-02 14:52:36

你可以通過使用標籤元素實現這一點沒有JavaScript來包裹在div你想點擊：

<input name="checkbox1" id="checkbox1" type="checkbox"> 
<label for="checkbox1"> 
    Click me 
</label>

和css：

input { 
    display:none; 
} 
:checked + label { 
    border: 1px solid rgba(81, 203, 238, 1); 
    box-shadow: 0 0 5px rgba(81, 203, 238, 1); 
}

看到這裏與CSS樣式的例子http://jsfiddle.net/vyP7c/761/

來源

2015-01-27 20:26:53

您可以通過隱藏複選框並對其標籤進行樣式設置，使用CSS代碼輕鬆完成此操作，如下所示：

HTML

<div id="checkboxes"> 
    <input type="checkbox" name="rGroup" value="1" id="r1" checked="checked" /> 
    <label class="whatever" for="r1"></label> 
    <input type="checkbox" name="rGroup" value="2" id="r2" /> 
    <label class="whatever" for="r2"></label> 
    <input type="checkbox" name="rGroup" value="3" id="r3" /> 
    <label class="whatever" for="r3"></label> 
</div>

CSS

.whatever{ 
    background-color: red; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
} 

#checkboxes input[type=checkbox]{ 
    display: none; 
} 

#checkboxes input[type=checkbox]:checked + .whatever{ 
    background-color: green; 
}

您可以在這個簡單的代碼來看看在這裏的行動：
JSFiddle

希望這有助於！ :)

來源

2015-04-01 13:38:58 nicosemp

這看起來不錯，謝謝製作！ '＃checkboxes'代碼的作用是什麼？沒有它的小提琴的工作原理是一樣的。 – 2017-07-01 18:27:17

它只是增加特異性。如果你只在CSS中使用'input [type = checkbox]'，你會將規則應用到頁面上的任何複選框。通過使用'＃checkboxes'，您只能將它應用於'id =「checkboxes」'在'div中的複選框。 – nicosemp 2018-01-01 18:32:09

創建一個像html複選框一樣的div

回答

相關問題