jQuery toggleClass example

Toggle class name on click in jQuery

HTML

姓名:<input type="text" name="username" value="Michael">
<br/>
密碼:<input type="password" name="password" value="12345abcde">
<br/>
性別:
<input type="radio" name="sex" value="m">男&nbsp;
<input type="radio" name="sex" value="f">女&nbsp;
<input type="radio" name="sex" value="u" checked>第三性

<button onclick="AllInputToJson();">
測試
</button>

CSS

body {
  background: #20262E;
  padding: 20px;
  color: #fff;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #fff;
}

JavaScript

var AllInputToJson = function(){

    var dicData = {};
    var allInput = $('input');
    $.each(allInput,function(i,v){
        dicData[$(v).attr('name')] = $(v).val();
    });    
    strJson = JSON.stringify(dicData);
    console.log(strJson);
}