JS implements drop-down checkbox effect (code example)-JS Tutorial-php.cn

This chapter brings you the use of js to implement the drop-down check box effect (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Let’s take a look at the effect first:

JS implements drop-down checkbox effect (code example)

Let’s take a look at the code:

HTML code:

    HTML 
  CSS 
  JavaScript 
  jQuery 
  PHP 
  MySQL 
 
 
 
     Java 
  C# 
  C++ 
  Pyhton

Copy after login

css code:

div { display: inline-block; } select { min-width: 200px; height: 25px; border: 1px solid #000; } ul { display: none; list-style: none; margin: 0; padding: 0; border: 1px solid #000; } label { display: block; padding: 2px 10px; white-space: nowrap; } ul li:hover { background-color: #aabbcc; }

Copy after login

JavaScript code:

/** * [dropDownCk 下拉复选框] * @param {[String]} boxId [父级元素id] * @param {[String]} selectId [下拉选id] * @param {[String]} hiddenId [隐藏区域id] * @return {[Array]} [description] */ function dropDownCk(selectId,hiddenId) { var boxId = "#" + boxId, selectId = "#" + selectId, hiddenId = "#" + hiddenId; $(hiddenId).mouseleave(function(){ // 鼠标离开隐藏复选区域 $(this).hide(); }); $(selectId).click(function() { // 切换显示与隐藏 $(hiddenId).toggle(); }); var tagArr = []; // 接收复选字段数组 $(selectId).html(""); $(hiddenId + ' label').find('input').click(function() { // 点击向数组添加元素 if ($(this).is(':checked')) { tagArr.push($(this).parent().text()); $(selectId).html(""); } else { tagArr.splice(tagArr.indexOf($(this).parent().text()), 1); // 删除对应元素 if (tagArr.length == 0) { $(selectId).html(""); } else { $(selectId).html(""); } } }); return tagArr; } var tag1 = dropDownCk("lang1","ck1"); var tag2 = dropDownCk("lang2","ck2")

Copy after login

Note: When there are many options, you can define an array and insert it into HTML to implement drop-down options. You can refer to the writing method of three-level linkage:Three-level linkage examples of playing with javascript.

The above is the detailed content of JS implements drop-down checkbox effect (code example). For more information, please follow other related articles on the PHP Chinese website!