聯繫表格7 - 複選框定製/程式化

我的工作在我的網站：http://cleaners.se/home/#kontakt 聯繫表格7 - 複選框定製/程式化

我有一個問題，我想樣式的複選框看起來是一樣的其他形式。我希望複選框是排他性的，所以您只能選擇一個複選框。這是否也是正確的方式把它們放在一起？或者有沒有更好的方法來做到這一點？

我已經做到了這一點：

.knapp + label { 
 
} 
 

 
label { 
 
\t display: inline; 
 
} 
 

 
.knapp { 
 
\t display: none; 
 
} 
 

 
.knapp + label { 
 
\t background-color: #2CACA9; 
 
\t border: 0; 
 
\t border-radius: 0; 
 
\t height: 50px; 
 
\t width: 50px; 
 
\t top: 3px; 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t margin-left: 10px; 
 
} 
 

 
.knapp + label:active, .knapp:checked + label:active { 
 
} 
 

 
.knapp:checked + label { 
 
\t background-color: #2CACA9; 
 
\t border: 0; 
 
\t color: #FFFFFF; 
 
} 
 

 
.knapp:checked + label:after { 
 
\t content: '\2716'; 
 
\t font-size: 25px; 
 
\t font-family: "montserrat"; 
 
\t position: absolute; 
 
\t top: 3px; 
 
\t left: 15px; 
 
\t color: #FFFFFF; 
 
}

<div> 
 
<input type="checkbox" id="telefon" class="knapp" /><label for="telefon"></label><input type="checkbox" id="e-post" class="knapp" /><label for="e-post"></label> 
 
</div>

來源

2015-10-08 David Jurkiewicz

如果你希望用戶只一次選擇的複選框之一。

然後你想使用無線輸入

<input type="radio" name="radio_button" /> Yes 
<br /> 
<input type="radio" name="radio_button" /> No

來源

2015-10-08 10:52:54 Zack1101

感謝您的答覆，但是當我使用的聯繫表格7插件的「標準」框，還有一個「獨家」選項爲箱子。有沒有專門的標籤/代碼框？ –

對不起，我不確定我是否理解「標準」和「專屬」的含義？您是否使用7 Wordpress插件的聯繫人？在表單部分中，您可以使用任何HTML/class'/ id的 – Zack1101

如果您查看我網站的鏈接，您將理解我的意思:-)該網站上有兩種複選框，自定義，並通過聯繫表單創建一個。7.如果您瞭解，請告訴我。 –

好吧，我一直工作在這一段時間了。我發現它可能需要添加JavaScript，是的，它適用於jQuery 1.7，我現在的問題是有人比我更好的JavaScript ...是否有任何方法使這個腳本更好？有想法就只能使用jQuery 1.7我在想什麼..

<script> 
    $('div .knapp').click(function() { 
     checkedState = $(this).attr('checked'); 
     $(this).parent('div').children('.knapp:checked').each(function() { 
      $(this).attr('checked', false); 
     }); 
     $(this).attr('checked', checkedState); 
    }); 
</script>

來源

2015-10-08 12:42:36

聯繫表格7 - 複選框定製/程式化

回答

相關問題