按使用 jquery 检查复选框的顺序显示文本

Display text in order in which a checbox is checked using jquery

本文关键字：顺序 显示 文本 复选框 检查 jquery      更新时间：2023-09-26

>**我有一个包含复选框列表的表单。我希望在另一个块中按复选框的选择顺序显示与每个复选框相对应的一些文本。当我取消选中一个复选框时，该文本应该消失，如果我重新选择它，它应该出现在现有文本下方。我已经检查了这个网站上的许多问题。到处都有文本显示的说明，但不按复选框的顺序，而是按照复选框本身的顺序。我想使用 html 和 jquery 来做到这一点。对方向的任何帮助都是可观的**

>http://jsfiddle.net/jinal1482/Lfuzkkvz/

您可以将"a"和"b"替换为您的值，也可以通过其他属性检索值。

网页代码 ： 

<input type='checkbox' onclick="updateList('a',this)" />
<input type='checkbox' onclick="updateList('b',this)" />

脚本代码：

var options = [];
function updateList(obj,source){
    if($(source).attr('checked')){
        options.push(obj);
    }
    else{
        options= $.grep(options, function( a ) {
              return a !== obj;
          });
    }
    console.log(options);
}

使用具有相同值的id标签和属性data-id的组合，以便连接复选框和文本

http://jsfiddle.net/edobs5cf/

.HTML： 

<div id="checkbox_div">
    <input type='checkbox' data-id="#txt-1" />text 1<br/>
    <input type='checkbox' data-id="#txt-2" />text 2<br/>
    <input type='checkbox' data-id="#txt-3" />text 3<br/>
    <input type='checkbox' data-id="#txt-4" />text 4<br/>
</div>
<div id="text">
    <div id="txt-1">text 1</div>
    <div id="txt-2">text 2</div>
    <div id="txt-3">text 3</div>
    <div id="txt-4">text 4</div>
</div>

.CSS：

#text div{display:none}

JQ：

$('#checkbox_div input[type="checkbox"]').click(function () {
    var $ch = $(this);
    var $id = $ch.data('id');
    if ($ch.is(':checked')) {
        // ensures that the text appears at the end of the list
        $($id).appendTo($('#text'));
        $($id).show();
    } else $($id).hide();
})

下面是一个简单的例子：

HTML：

<input type="checkbox" value="Apple">Apple</input>
<input type="checkbox" value="Banana">Banana</input>
<input type="checkbox" value="Mango">Mango</input>
<input type="checkbox" value="Orange">Orange</input>
<input type="checkbox" value="Grape">Grape</input>
<ul></ul>

JavaScript （jQuery）： 

$("input").on("change", function (e) {
    $("ul").html("");
    $("input:checked").each(function () {
        $("ul").append("<li>" + this.value + "</li>");
    });
});

鉴于OP中的详细信息，这应该是您要查找的。基本上，当其中一个输入（复选框）change时，我们通过循环访问每个checked输入来更新我们的列表。根据您实际希望文本的内容，您需要修改此示例。对于每个输入，我会考虑将单击输入时要显示的文本放在data attribute中。像这样：

<input type="checkbox" value="Apple" data-text="Apples are yummy">Apple</input>

这样，在循环中，您可以获取每个输入data-text属性并显示该属性。

相关文章：