<form class="qa-form" id="qa-form" action="#"> <ol> <li> <p>Tahap komunikasi untuk penyandaran terhadap masyarakat yang diharapkan dapat mengadopsi inovasi yang ditawarkan merupakan adopsi inovasi pada tahap ...</p> <label> <input type="radio" name="a-1" /> A. Design</label> <label> <input type="radio" name="a-1" /> B. Evaluation</label> <label> <input type="radio" name="a-1" /> C. Trial</label> <label> <input type="radio" name="a-1" /> D. Wareness Interest</label> <label> <input type="radio" name="a-1" /> E. Wareness Trial</label> </li> <li> <p>Apabila tuntutan dari luar berlawanan dengan keinginan maka seseorang akan mengalami emosi ...</p> <label> <input type="radio" name="a-2" /> A. Marah</label> <label> <input type="radio" name="a-2" /> B. Gembira atau senang</label> <label> <input type="radio" name="a-2" /> C. Sedih</label> <label> <input type="radio" name="a-2" /> D. Takut</label> </li> <li> <p>Portfolio sangat tepat digunakan untuk asesmen oleh guru, Terutama sekali ...</p> <label> <input type="radio" name="a-3" /> A. Selama pembelajaran berlangsung</label> <label> <input type="radio" name="a-3" /> B. Ketika akan dimulai pembelajaran</label> <label> <input type="radio" name="a-3" /> C. Pada saat putus cinta</label> <label> <input type="radio" name="a-3" /> D. Jawaban benar semua</label> <label> <input type="radio" name="a-3" /> E. Jawaban salah semua</label> </li> </ol> <p> <button type="submit">Simpan Jawaban</button> <button type="reset">Set Ulang Jawaban</button> </p> </form>
* { margin:0; padding:0; } body { font:normal normal 14px/1.4 Arial,Sans-Serif; background-color:white; color:black; } .qa-form {padding:1em 1em 2em} .qa-form ol, .qa-form li, .qa-form p, .qa-form input, .qa-form label { margin:0; padding:0; } .qa-form ol { list-style:decimal outside; margin:0 0 2em 3em; } .qa-form p { margin:1em 0; clear:both; } .qa-form label { display:block; width:300px; cursor:pointer; overflow:hidden; padding:5px 10px 5px 6px; margin:0 0 2px; line-height:100%; border-radius:20px; } .qa-form label input { outline:none; vertical-align:top; cursor:inherit; } .qa-form button { cursor:pointer; padding:.2em 1em; } .qa-form label:hover {background-color:whitesmoke} .qa-form label:active {background:none} .qa-form label.selected { background-color:forestgreen; color:white; }
$('#qa-form :radio').on("change", function() { $(this).parent()[this.checked ? "addClass" : "removeClass"]('selected').siblings().removeClass('selected'); }); $('#qa-form :reset').on("click", function() { $(this).closest('form').find('label').removeClass('selected').children().prop('checked', false); });