Question

我试图让用户选中他们感兴趣的方框以获取资源，然后单击按钮以获取超链接到这些资源的那些资源的列表。超链接（HTML中的ul id="results”）将被隐藏，直到他们通过“获取资源”按钮调用它们。

另外我想在结果说“你已表示有兴趣：”（换行符）然后列出超链接（换行符）“请点击链接了解更多”之前添加文字。如果未选中任何复选框，则会显示 div id =“alert”，这是我开始工作的。

我认为我非常接近，我似乎无法获得资源列表。

以下是我的编码链接： JSFiddle Code sample

$(document).ready(function()  {
    $('#alert').hide();
    $('#results > li').hide();

    /* Get the checkboxes values based on the parent div id */
    $("#resourcesButton").click(function() {
        getValue();
    });
});

function getValue(){
    var chkArray = [];

    /* look for all checkboxes that have a parent id called 'checkboxlist' attached to it and check if it was checked */
    $("#checkBoxes input:checked").each(function() {
        chkArray.push($(this).val());
    });

    /* we join the array separated by the comma */
    var selected;
    selected = chkArray.join(',') + ",";

    /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
    if(selected.length > 1){
        // Would like it to say something before and after what is displayed
        $('#results > li.' + $(this).attr('value')).show(); 
    } else {
        $('#alert').show();
    }
}

Answer 1

我抛弃selected变量，只针对列表项类检查chkArray内容，如：

function getValue() {
    var chkArray = [];
    /* look for all checkboxes that have a parent id called 'checkboxlist' attached to it and check if it was checked */
    $("#checkBoxes input:checked").each(function () {
        chkArray.push($(this).val());
    });
    $('#results li').each(function () {
        if ($.inArray($(this).attr('class'), chkArray) > -1) $(this).show()
        else($(this).hide())
    })
    /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
    if (!chkArray.length) {
        $('#alert').show();
        //alert("Please at least one of the checkbox"); 
    }
}

<强> jsFiddle example

Answer 2

我找到了一种直接达到你想要的方式。演示：https://jsfiddle.net/erkaner/oagc50gy/8/

这是我的方法：我浏览了所有复选框。这样我就可以获得原始列表i中当前项的索引，并使用此索引在第二个列表中显示相应的项。我使用.is(':checked')条件过滤了选中的项目，然后将它们添加到数组中：

function getValue() {
    var chkArray = [];

    $("#checkBoxes input").each(function (i) {//now we can get the original index anytime

         if($(this).is(':checked')){//is the item checked?
             chkArray.push($(this).val());//if so add it to the array
             var selected;
             selected = chkArray.join(", ");

             if (selected.length) {
               $('#results').find('li').eq(i).show();//show the corresponding link by using `i`
             } else {
                  $('#alert').show();
             }
        }
    });
}

Answer 3

$(document).ready函数中的最后一件事，添加：

$("#checkBoxes input:checkbox").click(function() {
    $('li.' + $(this).val().replace(/ /g, '.')).show()
});

JSFiddle

说明：

在准备好文档时，将click处理程序添加到show下面相应隐藏列表项的复选框中。这里棘手的是列表名称中的空格。这使得每个单词成为一个单独的类名，因此只需将列表名称与点.组合在一起，这将导致jQuery中的顺序类名调用。

通过使用<li class="Fitness & Recreation">作为列表项classname，您将为此项目提供3个类名：Fitness，&和Recreation。在jQuery中，您可以通过包含以点.开头的每个名称来选择具有多个类名的元素。例如，选择包含类名foo，bar和baz的列表项元素：

$('li.foo.bar.baz').show()

如果是<li class="Fitness & Recreation">：

$('li.Fitness.&.Recreation').show()

由于这些值存储在复选框的value属性中，我们使用jQuery来提取这些值：$(this).val()，用点替换空格：.replace(/ /g, '.')，并将结果连接到li.部分访问相应的列表项。

使用jQuery显示结果的复选框

3 个答案: