The simplest option to cancel a multi-select effect (taking fruit from a fruit basket for example) "Jsdemo"

"Feature description"
The simplest option to cancel a multi-select effect (taking fruit from a fruit basket for example)

"HTML code description"

<div class= "box" id= "box" >    <input class= "out" placeholder = "Please pick the fruit i want" disabled> <button class=    "BTN" > Close my Fruit basket </button><br>    <ul class= "list" >        <li class= "in red" > Apple </li>        <li class= "in purple" > Grapes </li>        <li class= "in yellow" > Banana </li>        <li class= "in Green > Ome </li>        <li class= "in orange" > Oranges </li>    </ul></div>    

"CSS Key code description"

//set the white text effect in the display box. out{width:300px;    height:30px; Line-height:50px;    padding:10px; Text-Align:center;    border:1px solid #ccc; Border-radius:5px; Font-size:20px;    Color: #f1ebe5; Text-shadow:0 8px 9px #c4b59d, 0px-2px 1px #fff; Font-Weight:bold; Background:linear-gradient (to bottom, #ece4d9 0, #e9dfd1 100%); Vertical-Align:middle;}//Fruit Basket Display effect. list,.list_hid{height:50px; Line-height:50px; Margin-top:20px;    Overflow:hidden; Text-Align:center; Background-color: #ccc; Border-radius:10px; transition:500ms height;}//Fruit Basket Hidden effect. list_hid{Height:0;}

"JS Code description"

//Get the whole boxvarOBox = document.getElementById (' box ');//Get buttonvarOBTN = obox.getelementsbytagname (' button ') [0];//get the Show boxvarOout = obox.getelementsbytagname (' input ') [0];//Get Fruit BasketvarOlist = Obox.getelementsbytagname (' ul ') [0];//get all the fruit inside the fruit basketvarAIn = olist.getelementsbytagname (' li ');//bind an event to a buttonObtn.onclick =function(){    //If the list classname is a list, it means that the fruit basket is in the open state.    if(Olist.classname = = ' List '){        //change its classname to List_hid, close the fruit basketOlist.classname = ' List_hid '; //set the text to show as open my fruit basket         This. InnerHTML = ' Open My fruit basket '; //The Fruit Basket is closed at this time}Else{        //change its classname to list, open the fruit basketOlist.classname = ' list '; //set text to close my fruit basket         This. InnerHTML = ' Close my fruit basket '; }} for(vari = 0; i < ain.length; i++){    //add a tag to each fruit, default to False, indicating that it is not selectedAin[i].mark =false; //add events to each fruitAin[i].onclick =function(){        //When the fruit is selected, uncheck it and select it when the fruit is not selected.         This. Mark =! This. Mark; //If the fruit is selected, the text color turns bright gray        if( This. Mark) {             This. Style.color = ' #ccc '; //if unchecked, the text color is black}Else{             This. Style.color = ' black '; }        //Run the Marquee functionfnout (); }}//set up a marquee functionfunctionfnout () {//set a temporary string to store the values that the display box will display    varstr = ";  for(vari = 0; i < ain.length; i++){        //when the fruit is selected        if(Ain[i].mark) {//add its innerHTML to the temporary stringstr + = ', ' +ain[i].innerhtml; }    }    //then remove the comma from the first fruit before you start.Oout.value = Str.slice (1);};

"Effect Show"

"Source View"

The simplest option to cancel a multi-select effect (taking fruit from a fruit basket for example) "Jsdemo"