Question

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

Answer 1

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

您可以替换＆＃39; a＆＃39;和＆＃39; b＆＃39;使用您的值，或者您也可以通过其他属性检索值。

Html代码：

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

Javascript代码：

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);
}

Answer 2

这是一个简单的example：

<强> 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属性并显示该属性。

Answer 3

使用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();

})

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

3 个答案: