jquery를 사용하여 확인란 값을 필터링 할 수 없습니다.

Niranjana neeranj

값이있는 거의 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>

Swati

확인란에는 이미 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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

jquery.cookie를 사용하여 확인란 값을 유지할 수 없습니다.

분류에서Dev

leftOf를 사용하여 확인란을 선택할 수 없습니다.

분류에서Dev

Jade 및 Node를 사용하여 확인란을 표시 할 수 없습니다.

분류에서Dev

포인터를 사용하여 정수 값을 변경할 수 없습니다.

분류에서Dev

각도 스키마 양식 지시문을 사용하여 확인란을 렌더링 할 수 없습니다.

분류에서Dev

`?`를 사용하여 null 및 설정 값을 확인할 수 없습니다.

분류에서Dev

jquery를 사용하여 기타 값을 확인한 후 텍스트 상자를 표시 할 수 없습니다.

분류에서Dev

jQuery Datatables를 사용하여 열 합계 값 (확인란 선택)을 가져올 수 없습니다.

분류에서Dev

Kotlin-`is`를 사용하여 인터페이스 사용량을 확인할 수 없습니다.

분류에서Dev

여러 확인란에서 POST 데이터를 할당 할 수 없습니다.

분류에서Dev

필터 필드의 queryset 값을 사용하여 django에서 모델의 인스턴스를 어떻게 필터링 할 수 있습니까?

분류에서Dev

Testcafe에서 Selector.withText ()를 사용하여 <tspan>을 필터링 할 수 없습니다.

분류에서Dev

dataweave를 사용하여 동적 키가있는 객체 배열을 필터링 할 수 없습니다.

분류에서Dev

Ember.js에서 Ember.Select를 사용하여 모델을 필터링 할 수 없습니다.

분류에서Dev

Ember.js에서 Ember.Select를 사용하여 모델을 필터링 할 수 없습니다.

분류에서Dev

PHP에서 href를 사용하여 확인란 값을 어떻게 전달할 수 있습니까?

분류에서Dev

여러 (양식) 검색 필드를 확인란 및 / 또는 드롭 다운을 사용하여 하나로 결합 할 수 있습니까?

분류에서Dev

초기 데이터를 저장 한 후 UltraGrid 확인란 값을 True로 설정할 수 없습니다.

분류에서Dev

필터를 사용하여 여러 필드를 필터링 할 수 없습니다.

분류에서Dev

JQuery 2.1.4를 사용하여 확인란을 필터링하는 방법은 무엇입니까?

분류에서Dev

jq를 사용하여 JSON 출력을 필터링 할 수 없습니다. CURL을 사용하고 있습니다.

분류에서Dev

% in %를 사용하여 dplyr 필터에 목록을 전달할 수 없습니다.

분류에서Dev

다음 문서에 대해 jQuery를 사용하여 ASP 입력을 확인할 수 없습니다.

분류에서Dev

Bootstrap 테이블에서 jQuery를 사용하여 데이터 URL 값을 설정할 수 없습니다.

분류에서Dev

GAS를 사용하여 목록 상자에서 확인란을 사용할 수 있습니까?

분류에서Dev

Angular2를 사용하여 Style.Top을 클릭 한 확인란의 좌표에 바인딩 할 수 없습니다.

분류에서Dev

JQuery를 사용하여 Python으로 값을 전달할 수 없습니다.

분류에서Dev

jquery를 사용하여 선택한 값을 설정할 수 없습니다.

분류에서Dev

jQuery를 사용하여 iframe 내부의 값을 변경할 수 없습니다.

Related 관련 기사

  1. 1

    jquery.cookie를 사용하여 확인란 값을 유지할 수 없습니다.

  2. 2

    leftOf를 사용하여 확인란을 선택할 수 없습니다.

  3. 3

    Jade 및 Node를 사용하여 확인란을 표시 할 수 없습니다.

  4. 4

    포인터를 사용하여 정수 값을 변경할 수 없습니다.

  5. 5

    각도 스키마 양식 지시문을 사용하여 확인란을 렌더링 할 수 없습니다.

  6. 6

    `?`를 사용하여 null 및 설정 값을 확인할 수 없습니다.

  7. 7

    jquery를 사용하여 기타 값을 확인한 후 텍스트 상자를 표시 할 수 없습니다.

  8. 8

    jQuery Datatables를 사용하여 열 합계 값 (확인란 선택)을 가져올 수 없습니다.

  9. 9

    Kotlin-`is`를 사용하여 인터페이스 사용량을 확인할 수 없습니다.

  10. 10

    여러 확인란에서 POST 데이터를 할당 할 수 없습니다.

  11. 11

    필터 필드의 queryset 값을 사용하여 django에서 모델의 인스턴스를 어떻게 필터링 할 수 있습니까?

  12. 12

    Testcafe에서 Selector.withText ()를 사용하여 <tspan>을 필터링 할 수 없습니다.

  13. 13

    dataweave를 사용하여 동적 키가있는 객체 배열을 필터링 할 수 없습니다.

  14. 14

    Ember.js에서 Ember.Select를 사용하여 모델을 필터링 할 수 없습니다.

  15. 15

    Ember.js에서 Ember.Select를 사용하여 모델을 필터링 할 수 없습니다.

  16. 16

    PHP에서 href를 사용하여 확인란 값을 어떻게 전달할 수 있습니까?

  17. 17

    여러 (양식) 검색 필드를 확인란 및 / 또는 드롭 다운을 사용하여 하나로 결합 할 수 있습니까?

  18. 18

    초기 데이터를 저장 한 후 UltraGrid 확인란 값을 True로 설정할 수 없습니다.

  19. 19

    필터를 사용하여 여러 필드를 필터링 할 수 없습니다.

  20. 20

    JQuery 2.1.4를 사용하여 확인란을 필터링하는 방법은 무엇입니까?

  21. 21

    jq를 사용하여 JSON 출력을 필터링 할 수 없습니다. CURL을 사용하고 있습니다.

  22. 22

    % in %를 사용하여 dplyr 필터에 목록을 전달할 수 없습니다.

  23. 23

    다음 문서에 대해 jQuery를 사용하여 ASP 입력을 확인할 수 없습니다.

  24. 24

    Bootstrap 테이블에서 jQuery를 사용하여 데이터 URL 값을 설정할 수 없습니다.

  25. 25

    GAS를 사용하여 목록 상자에서 확인란을 사용할 수 있습니까?

  26. 26

    Angular2를 사용하여 Style.Top을 클릭 한 확인란의 좌표에 바인딩 할 수 없습니다.

  27. 27

    JQuery를 사용하여 Python으로 값을 전달할 수 없습니다.

  28. 28

    jquery를 사용하여 선택한 값을 설정할 수 없습니다.

  29. 29

    jQuery를 사용하여 iframe 내부의 값을 변경할 수 없습니다.

뜨겁다태그

보관