如何使html中的單選框看起來像複選框，並在檢查時使它們具有x？

我想製作一個帶有複選框的複選框。此外，我希望他們在檢查時擁有glyphcon x's。我嘗試了幾種方案來解決這個，包括：如何使html中的單選框看起來像複選框，並在檢查時使它們具有x？

 input[type="radio"] { 
      -webkit-appearance: checkbox; /* Chrome, Safari, Opera */ 
      -moz-appearance: checkbox; /* Firefox */ 
      -ms-appearance: checkbox;  /* not currently supported */ 
     }

當我用這個解決方案是跨越一個的確認，以及他們上空盤旋後，將消失的複選框線製成的複選框。

我也試過這裏提供的解決方案：How to style checkbox using CSS? 他們似乎沒有工作。

有人可以幫我嗎？

來源

2017-03-23 Ben Rei

您確定要這樣做嗎？人們有直觀的期望，將外觀映射到行爲上。對開發者來說似乎無害的事情往往會讓用戶感到困惑。 – shabs

爲什麼要用收音機代替支票？ –

@majidrazvi是的，我確定我想要這樣做。 –

也許這個解決方案會讓你更容易。

我已經寫了這個函數，所以你可以在任意數量的複選框上使用它。唯一的要求是給它們一個radio的類，併爲這組選項命名。

jQuery的解決方案

$('input[type=checkbox][class=radio]').on('change', function(e) { 
 
    var Group = this.name; 
 
    $('input[type=checkbox][name=' + Group + '][class=radio]').prop('checked', false); 
 
    this.checked = true; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h4>Eyes</h4> 
 
Blue <input type="checkbox" name="eyes" class="radio"> 
 
Green <input type="checkbox" name="eyes" class="radio"> 
 
Brown <input type="checkbox" name="eyes" class="radio"> 
 
<h4>Hair</h4> 
 
Black <input type="checkbox" name="hair" class="radio"> 
 
Brown <input type="checkbox" name="hair" class="radio"> 
 
Ginger <input type="checkbox" name="hair" class="radio">

純JavaScript解決方案

var checks = document.getElementsByClassName('radio'); 
 
for (var i = 0; i < checks.length; i++) { 
 
    checks[i].addEventListener('change', radios, false); 
 
} 
 

 
function radios() { 
 
    var x = document.querySelectorAll("input[name=" + this.name + "]"); 
 
    for (var i = 0; i < x.length; i++) { 
 
    x[i].checked = false 
 
    } 
 
    this.checked = true; 
 
}

<h4>Eyes</h4> 
 
Blue <input type="checkbox" name="eyes" class="radio"> 
 
Green <input type="checkbox" name="eyes" class="radio"> 
 
Brown <input type="checkbox" name="eyes" class="radio"> 
 
<h4>Hair</h4> 
 
Black <input type="checkbox" name="hair" class="radio"> 
 
Brown <input type="checkbox" name="hair" class="radio"> 
 
Ginger <input type="checkbox" name="hair" class="radio">

如果您對源代碼的任何問題，請以上下面發表評論，我會盡快回復您。

我希望這會有所幫助。快樂的編碼！

來源

2017-03-24 00:31:43 NewToJS

如何使html中的單選框看起來像複選框，並在檢查時使它們具有x？

回答

相關問題