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
Post a Comment