javascript - How to add input fields when checkbox from a dropdown is clicked -


i'm trying add 3-4 input fields under each list item when checkbox clicked.

this code far, have tried using following show/hide, can't seem find way make work several input fields , each checkbox toggle instead of show/ hide option, i'm not sure how apply either.

$(".dropdown dt a").on('click', function() {    $(".dropdown dd ul").slidetoggle('fast');  });    $(".dropdown dd ul li a").on('click', function() {    $(".dropdown dd ul").hide();  });    function getselectedvalue(id) {    return $("#" + id).find("dt span.value").html();  }    $(document).bind('click', function(e) {    var $clicked = $(e.target);    if (!$clicked.parents().hasclass("dropdown")) $(".dropdown dd ul").hide();  });    $('.mutliselect input[type="checkbox"]').on('click', function() {      var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(),      title = $(this).val() + ",";      if ($(this).is(':checked')) {      var html = '<span title="' + title + '">' + title + '</span>';      $('.multisel').append(html);      $(".hida").hide();    } else {      $('span[title="' + title + '"]').remove();      var ret = $(".hida");      $('.dropdown dt a').append(ret);      }  });    $(function () {          $("#when_hidden").click(function () {              if ($(this).is(":checked")) {                  $("#when_shown").show();              } else {                  $("#when_shown").hide();              }          });      });
body {    font: normal 14px/100% "andale mono", andalemono, monospace;    color: #fff;    padding: 50px;    width: 300px;    margin: 0 auto;    background-color: #374954;  }    .dropdown {    position: absolute;    top: 50%;    transform: translatey(-50%);  }    {    color: #fff;  }    .dropdown dd,  .dropdown dt {    margin: 0px;    padding: 0px;  }    .dropdown ul {    margin: -1px 0 0 0;  }    .dropdown dd {    position: relative;  }    .dropdown a,  .dropdown a:visited {    color: #fff;    text-decoration: none;    outline: none;    font-size: 12px;  }    .dropdown dt {    background-color: #4f6877;    display: block;    padding: 8px 20px 5px 10px;    min-height: 25px;    line-height: 24px;    overflow: hidden;    border: 0;    width: 272px;  }    .dropdown dt span,  .multisel span {    cursor: pointer;    display: inline-block;    padding: 0 3px 2px 0;  }    .dropdown dd ul {    background-color: #4f6877;    border: 0;    color: #fff;    display: none;    left: 0px;    padding: 2px 15px 2px 5px;    position: absolute;    top: 2px;    width: 280px;    list-style: none;    height: 100px;    overflow: auto;  }    .dropdown span.value {    display: none;  }    .dropdown dd ul li {    padding: 5px;    display: block;  }    .dropdown dd ul li a:hover {    background-color: #fff;  }    button {    background-color: #6bbe92;    width: 302px;    border: 0;    padding: 10px 0;    margin: 5px 0;    text-align: center;    color: #fff;    font-weight: bold;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <dl class="dropdown">      <dt>      <a href="#">        <span class="hida">select</span>            <p class="multisel"></p>        </a>      </dt>      <dd>      <div class="mutliselect">        <ul>          <li>            <input type="checkbox" value="option1" />option1</li>              <li>            <input type="checkbox" value="option2" id="when_hidden" />option2</li>            <input type="text" id="when_shown" style="display: none" id="usr">          <li>            <input type="checkbox" value="option3" />option3</li>          <li>            <input type="checkbox" value="option4" />option4</li>          <li>            <input type="checkbox" value="option5" />option5</li>          <li>            <input type="checkbox" value="option6" />option6</li>        </ul>      </div>    </dd>    <button>filter</button>  </dl>

please check below snippet covers basic functionality. can add more code required.

$(".dropdown dt a").on('click', function() {    $(".dropdown dd ul").slidetoggle('fast');  });    $(".dropdown dd ul li a").on('click', function() {    $(".dropdown dd ul").hide();  });    $('.list').on('click', '[id^="opt"]', function() {    if ($(this).is(':checked')) {      html = '<ul class="input-list" style="list-style-type: none;">';      html += '<li><input type="text" class="sub-input" id="input-' + $(this).attr('id') + '"></li>';      html += '</ul>';      $(this).parent('li').append(html);      $('.multisel').append($(this).val() + ', ');    } else {      $(this).next('ul').remove();      $('.multisel').html($('.multisel').html().replace($(this).val()+', ',''));    }  })
body {    font: normal 14px/100% "andale mono", andalemono, monospace;    color: #fff;    padding: 50px;    width: 300px;    margin: 0 auto;    background-color: #374954;  }    .dropdown {    position: absolute;    top: 50%;    transform: translatey(-50%);  }    {    color: #fff;  }    .dropdown dd,  .dropdown dt {    margin: 0px;    padding: 0px;  }    .dropdown ul {    margin: -1px 0 0 0;  }    .dropdown dd {    position: relative;  }    .dropdown a,  .dropdown a:visited {    color: #fff;    text-decoration: none;    outline: none;    font-size: 12px;  }    .dropdown dt {    background-color: #4f6877;    display: block;    padding: 8px 20px 5px 10px;    min-height: 25px;    line-height: 24px;    overflow: hidden;    border: 0;    width: 272px;  }    .dropdown dt span,  .multisel span {    cursor: pointer;    display: inline-block;    padding: 0 3px 2px 0;  }    .dropdown dd ul.list {    background-color: #4f6877;    border: 0;    color: #fff;    display: none;    left: 0px;    padding: 2px 15px 2px 5px;    position: absolute;    top: 2px;    width: 280px;    list-style: none;    height: 100px;    overflow: auto;  }    .dropdown span.value {    display: none;  }    .dropdown dd ul li {    padding: 5px;    display: block;  }    .dropdown dd ul li a:hover {    background-color: #fff;  }    button {    background-color: #6bbe92;    width: 302px;    border: 0;    padding: 10px 0;    margin: 5px 0;    text-align: center;    color: #fff;    font-weight: bold;  }
<dl class="dropdown">    <dt>      <a href="#">        <span class="hida">select</span>            <p class="multisel"></p>        </a>    </dt>    <dd>      <div class="mutliselect">        <ul class="list">          <li><input type="checkbox" id="opt1" value="option1" />option1</li>          <li><input type="checkbox" id="opt2" value="option2" />option2</li>          <li><input type="checkbox" id="opt3" value="option3" />option3</li>          <li><input type="checkbox" id="opt4" value="option4" />option4</li>          <li><input type="checkbox" id="opt5" value="option5" />option5</li>        </ul>      </div>    </dd>    <button>filter</button>  </dl>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -