检查 ul 列表 on_change 中是否存在 HTML 属性（复选框）

Question

我想知道如何查看复选框元素（如此处的 cat）的 HTML 属性是否在 <ul> 元素列表中, 使用 jQuery.

// checkbox like so, cat is the string I want
<input type="checkbox" name="country_code" data-cat="city_inf">

// list of elements containing my categories (when one element of it is checked in HTML code)
<ul id="sortable" class="ul_drag_el">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Cat name 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Cat name 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>etc..</li>
</ul>

另一个问题是，如果我想计算一个类别中有多少元素被检查到 display/hide li 类别名称，我应该按名称列出每个检查的元素还是我可以做一个计数器吗（仍在 jQuery）。

目前我在 jQuery 中只有这个，但我真的不知道如何开始。

    $("input[type='checkbox']").change(function(){
        let text_to_append = "<li className='ui-state-default'><span className='ui-icon ui-icon-arrowthick-2-n-'>"
        text_to_append += $(this).attr('name');
        text_to_append += "</span>"

        if(this.checked){
            $('.ul_drag_el').append(text_to_append)
        }  
    })

编辑：它终于可以用了

$("input[type='checkbox']").change(function(){
        let this_name = $(this).attr('data-cat')

        let text_to_append = "<li className='ui-state-default' data-cat='"
        text_to_append += this_name
        text_to_append += "'><span className='ui-icon ui-icon-arrowthick-2-n-'>"
        text_to_append += this_name
        text_to_append += "</span>"

        if(this.checked){
            $('.ul_drag_el').append(text_to_append)
        }else{
            $('#sortable li').each(function(){
                if($(this).attr('data-cat') == this_name){
                    $(this).remove();
                }
            })
        }
    })

Answer 1

$(document).on('change', '.country_code', function () {
    var cat = "";
    if ($(this).is(':checked')) {
        cat = $(this).attr('data-cat');
    }
    $('#sortable li').each(function () {
        if ($(this).attr('data-cat') == cat) {
            $(this).show()
        } else {
            $(this).hide()
        }
    })
})

Answer 2

您也可以简单地将数据属性添加到您的 li 标签，该标签的值为 data-cat 。然后，只要选中复选框，您就可以简单地检查是否 data-cat已经存在或不使用 $("#ul").find("[data-name=" + $(this).data('cat') + "]").length == 0) 如果是，只需删除它们或添加新的 li.

演示代码 :

$("input[type='checkbox']").change(function() {
  //check if checkbox is checked & that doesn't exist inside ul
  if ((this.checked) && ($("#ul").find("li[data-name=" + $(this).data('cat') + "]").length == 0)) {
    let text_to_append = "<li className='ui-state-default' data-name='" + $(this).data('cat') + "'><span className='ui-icon ui-icon-arrowthick-2-n-'>"
    text_to_append += $(this).attr('name');
    text_to_append += "</span></li>"
    $('.ul_drag_el').append(text_to_append)
  } else {
    //remove them
    $("li[data-name=" + $(this).data('cat') + "]").remove()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="city_inf" data-cat="city_inf">
<input type="checkbox" name="abcs" data-cat="abcs">
<ul id="sortable" class="ul_drag_el">

</ul>

检查 ul 列表 on_change 中是否存在 HTML 属性（复选框）

Check if HTML attr is present in ul list on_change(checkbox)

javascript

html

jquery

jquery-ui