값이있는 거의 10 개의 확인란이 있습니다.
해당 값을 기준으로 확인란을 필터링하고 싶지만 현재는 할 수 없습니다.
HTML 코드를 변경할 수 없지만 체크 박스를 필터링하지 않는 이유를 모르겠습니다.
(function($) {
$(document).ready(function() {
// Options search field
$('#options').before(
'<input id="search" style="display: inline; width:180px;" type="text" />' +
'<span><a href="" onclick="return false;" id="search-clear">X</a></span>'
);
$('#search').keyup(function() {
var valThis = $(this).val().toLowerCase();
$('input[type=checkbox]').each(function() {
var text = $("label[for='" + $(this).attr('id') + "']").text().toLowerCase();
(text.indexOf(valThis) == 0) ? $(this).parent().show(): $(this).parent().hide();
});
});
// Search clear button
$("#search-clear").click(function() {
$("#search").val("");
$('input[type=checkbox]').each(function() {
$(this).parent().show();
});
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="options">
<div class="col s12 ">
<label>Server</label>
<div id="id_form-0-server">
<ul>
<li class="">
<label>
<input type="checkbox" name="form-0-server" value="ABC" id="id_form-0-server_0">
<span>ABC</span>
</label>
</li>
<li class="">
<label>
<input type="checkbox" name="form-0-server" value="EFD" id="id_form-0-server_1">
<span>EFD</span>
</label>
</li>
<li class="">
<label>
<input type="checkbox" name="form-0-server" value="KIS" id="id_form-0-server_2">
<span>KIS</span>
</label>
</li>
<li class="">
<label>
<input type="checkbox" name="form-0-server" value="PNJS" id="id_form-0-server_3">
<span>PNJS</span>
</label>
</li>
<li class="">
<label>
<input type="checkbox" name="form-0-server" value="PJSGRA" id="id_form-0-server_4">
<span>PJSGRA</span>
</label>
</li>
<li class="">
<label>
<input type="checkbox" name="form-0-server" value="KLSCV" id="id_form-0-server_5">
<span>KLSCV</span>
</label>
</li>
</ul>
</div>
</div>
확인란에는 이미 value ="youareseacrhing"
검색 작업을 수행하는 데 사용할 수 있습니다.
데모 코드 :
(function($) {
$(document).ready(function() {
// Options search field
$('#options').before(
'<input id="search" style="display: inline; width:180px;" type="text" />' +
'<span><a href="" onclick="return false;" id="search-clear">X</a></span>'
);
$('#search').keyup(function() {
var valThis = $(this).val().toLowerCase();
$('input[type=checkbox]').each(function() {
//use checkbox val
var text = $(this).val().toLowerCase();
//closest to hide lis
(text.indexOf(valThis) > -1 ) ? $(this).closest('li').show(): $(this).closest('li').hide();
});
});
// Search clear button
$("#search-clear").click(function() {
$("#search").val("");
$('input[type=checkbox]').each(function() {
$(this).closest('li').show();
});
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="options">
<div class="col s12 ">
<label>Server</label>
<div id="id_form-0-server">
<ul>
<li class="">
<label> <input type="checkbox" name="form-0-server" value="ABC" id="id_form-0-server_0"><span>ABC</span> </label>
</li>
<li class="">
<label><input type="checkbox" name="form-0-server" value="EFD" id="id_form-0-server_1"> <span>EFD</span></label>
</li>
<li class="">
<label><input type="checkbox" name="form-0-server" value="KIS" id="id_form-0-server_2"><span>KIS</span></label>
</li>
<li class="">
<label><input type="checkbox" name="form-0-server" value="PNJS" id="id_form-0-server_3"><span>PNJS</span></label>
</li>
<li class="">
<label><input type="checkbox" name="form-0-server" value="PJSGRA" id="id_form-0-server_4"><span>PJSGRA</span></label>
</li>
<li class="">
<label><input type="checkbox" name="form-0-server" value="KLSCV" id="id_form-0-server_5"><span>KLSCV</span> </label>
</li>
</ul>
</div>
</div>
.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다