Checkbox Açık/Kapalı - Onaylı/Onaysız

by mustafa yılmaz

HTML

<div id="kapsayici">
 <form>
  <ul>
   <li>
    <label>Açık/Kapalı</label>
    <input type='checkbox' name='acik_kapali' value='1' title="Açık Kapalı" /> <span></span>
   </li>
   <li>
    <label>Onaylı/Onaysız</label>
    <input type='checkbox' name='onayli_onaysiz' value='1' title="Onaylı Onaysız" /> <span></span>
   </li>
  </ul>
 </form>
</div>

CSS

html,body,div,span,h1,h2,h3,p,hr,br,img,form,input,ul,li,a {
 margin:0;
 padding:0;
 border:0;
}
ul li {list-style:none;}
body {
 font-family:Helvetica, Arial, Tahoma, sans-serif;
 font-size:13px;
 color:#444;
 line-height:1.5em;
} 
#kapsayici {
background:#fff;
margin:10px auto;
width:960px;
border:1px solid #dfdfdf;
min-height: 700px;
}

JavaScript

$(document).ready(function(){
$('input[type="checkbox"]').click(function () {
var title = $(this).attr("title").split(" ");
var metin = "";
if ($(this).attr("checked")) metin = title[0];
else metin = title[1];
$(this).next('span').html(metin);
});
});