js klik pada kotak teks untuk memaparkan kemahiran checkbox_javascript yang boleh dipilih-tutorial js-php.cn

js klik pada kotak teks untuk memaparkan kemahiran checkbox_javascript yang boleh dipilih

WBOY

Lepaskan： 2016-05-16 15:16:21

asal

2105 orang telah melayarinya

Artikel ini berkongsi contoh kod Apabila anda mengklik pada kotak teks, kotak pilihan lungsur akan muncul. Ia mudah, tetapi ia boleh digunakan sebagai contoh untuk memudahkan pemahaman dan pengembangan pelajar.
Kodnya adalah seperti berikut:

<html>
<head>
<meta charset="gb2312">
<title>js点击文本框弹出可选择的checkbox复选框</title>
<style type="text/css">
#div{
 margin-bottom:10px;
 position:relative;
}
#div1{
 width:153px;
 padding-top:0px;
 padding-left:0px;
 position:absolute;
}
#div1 ul{
 margin-top:0px;
 padding-left:0px;
 background-color:#ccc;
 list-style:none;
}
#div1 ul li{
 padding-left:0px;
}
#div1 ul li input{
 margin-left:15px;
}
.close{
 display:none;
}
.open{
 display:block;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
 var position=$("#xx").offset(); 
 $("#div1").offset({ 
  top:position.top+22,
  left:position.left
 }); 
 $("#xx").click(function(){ 
  $("#NG").toggleClass("open"); 
 });
 $("#div1 input[name=ng]").click(function(){ 
  var arr=new Array(); 
  $("input[name=ng]:checked").each(function(key,value){
   arr[key]=$(value).val();
  }); 
  $("#xx").val(arr.join(",")); 
 }) 
}) 
</script>
</head>
<body>
<div id="div">
 <div align="center" id="div2" >
  <form id="form1">
   <input type="text" readonly="readonly" id="xx"/>
   <input type="submit" value="查询"/>
  </form>
 </div>
 <div id="div1">
  <ul class="close" id="NG" >
   <li><input type="checkbox" name="ng" value=1 />1</li>
   <li><input type="checkbox" name="ng" value=2 />2</li>
   <li><input type="checkbox" name="ng" value=3 />3</li>
  </ul>
 </div>
</div>
</body>
</html>

Salin selepas log masuk

Kod di atas mencapai keperluan kami Berikut ialah pengenalan kepada proses pelaksanaannya.
Komen komen:
1.$(function(){}), Laksanakan kod dalam fungsi apabila struktur dokumen dimuatkan sepenuhnya.
2.var position=$("#xx").offset(), mendapat offset kotak teks berbanding dokumen dokumen, fungsi offset() mengembalikan objek , objek ini mengandungi dua atribut kiri dan atas, yang mewakili offset mendatar dan menegak berbanding dengan dokumen masing-masing.
3.$("#div1").offset({top:position.top 22,left:position.left}), Tetapkan mengimbangi dokumen relatif bagi pop timbul bekas menu lungsur Jumlah anjakan, tambah pertama 22 adalah untuk memaparkannya di bawah kotak teks.
4.$("#xx").click(function(){$("#NG").toggleClass("open");}), didaftarkan untuk kotak teks Klik fungsi pengendali acara, klik padanya untuk menukar kelas gaya terbuka untuk memadam dan menambah, iaitu, untuk menetapkan paparan dan penyembunyian menu lungsur.
5.$("#div1 input[name=ng]").click(function(){ }), Daftar klik pemprosesan acara untuk kotak teks yang nilai atribut namanya ialah fungsi ng.
6.var arr=new Array(), mencipta tatasusunan untuk menyimpan nilai kotak pilihan yang dipilih.
7.$("input[name=ng]:checked").setiap(fungsi(kunci,nilai){arr[key]=$(value).val();}),Simpan nilai kotak semak yang dipilih ke dalam tatasusunan.
8.$("#xx").val(arr.join(","));, Sambungkan elemen tatasusunan ke dalam rentetan dan tuliskannya ke dalam kotak teks.