Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <form class="question">
    <h1>あなたの血液型は？</h1>
    <ul class="bloodtype-list">
      <li><label><input type="radio" name="bloodtype" value="A" checked />A</label></li>
      <li><label><input type="radio" name="bloodtype" value="B"  />B</label></li>
      <li><label><input type="radio" name="bloodtype" value="O" />O</label></li>
      <li><label><input type="radio" name="bloodtype" value="AB" />AB</label></li>
    </ul>
  </form>
  
</body>
</html>
​
 
/**
 * As jQuery plugin
 */
(function(){
​
    // return;
​
    $.fn.extend({
        toggleButtons : function(callback){
            var radios = this;
            radios.on("change", function(e){
                radios.closest("label").removeClass("selected");
                $(e.target).closest("label").addClass("selected");
                callback.call(this, e);
            });
            radios.closest("label").on("click", function(e){
                var input = $(this).find("input");
                if(! input.prop("checked")){
                    input.prop("checked", true).trigger("change");
                }
            });
            radios.filter(":checked").trigger("change");
        }
    });
​
    $("input[name=bloodtype]").toggleButtons(function(){
        console.log(this);
        console.log(arguments);
    });
​
}());
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mach3sspro
0viewers