Radiocharmは軽量のjQueryプラグインで、ラジオボックスにカスタムラベル、アイコン、選択したラジオボックスを再度クリックして選択のチェックを外すことができます。

Default Implementation

<input data-radiocharm-label="Label Here" type="radio" />

$(document).ready(function(){
  $('input:radio').radiocharm();
});

Background Color Implementation

<input data-radiocharm-label="Label Here" data-radiocharm-background-color="c9302c" type="radio" />

$(document).ready(function(){
  $('input:radio').radiocharm();
});

Icon Implementation

<input data-radiocharm-label="Label Here" data-radiocharm-icon="thumbs-up" type="radio" />

$(document).ready(function(){
  $('input:radio').radiocharm();
});

Uncheckable Implementation

<input data-radiocharm-label="Label Here" type="radio" />

$(document).ready(function(){
  $('input:radio').radiocharm({
    uncheckable: true
  });
});

<link href=https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet" />

MIT

• Tag
• Form Elements
• jQuery