Question

当我点击指定的复选框时，我会尝试获取它将使用复选框的标签替换指定div中的文本，如果选中了多个复选框，则会将它们放置为a，如果文本是为了延长它的数量，然后是......

我的html看起来像：

<div style="cursor:pointer" id="st"><div id="txtst">&#9660; No Preference</div>
</div><div id="divst" style="display:none;font-size:smaller">
<input type="checkbox" name="s1" value="S"> <label for="s1">Repairs</label><br>
<input type="checkbox" name="s2" value="I"> <label for="s2">Orders</label><br>
<input type="checkbox" name="s3" value="M"> <label for="s3">Technician</label><br>

和我的js：

$(function(){
    $('#lf').click(function () {
        $('#divlf').toggle();
    });
    $('#st').click(function () {
        $('#divst').toggle();
    });
});
$(function(){
    $('#divst').click(function() {
        if ( $(input[checkbox]).length > 0) {
            $("#txtst").hide();
        } else {
            $("#txtst").show();
        }
    }); 
});

我知道这个js对于复选框功能是不完整的，因为它是我在这里看到的另一个例子但是没有接近正确答案。

Answer 1

类似......

$(document).ready(function() {
    $('body').delegate('input:checkbox', 'change', function() {
        var txt = "";
        $('input:checkbox:checked').each(function(i) {
            if (txt) { txt += ","; }
            txt += $(this).next().text();

            // see if txt is too long
            if (txt.length > 50)
            {
               txt = txt.substring(0, 47) + "...";
               return false; // stop the each() loop
            }
        });
        if (!txt) { txt = "No Preference"; }
        $('#txtst').text(txt);
    });
});

如果您的复选框后面有标签，这将有效：

<input type='checkbox' id='cb1'><label>Checkbox 1</label><br />
<input type='checkbox' id='cb2'><label>Checkbox 2</label><br />

Answer 2

$("input[type='checkbox']").change(function(){
    if(!$("input[type='checkbox']").length > 0){
        $("#divst").html( $("label[for='"+$(this).html()+"']") );
    } else {
        $("#divst").html("You Have No Preference");
    }
});

要使其适用于一组特殊的复选框，您需要在复选框中添加class="group_1"，并将"input[type='checkbox']"替换为.group_1。

使用复选框中的特定信息填充div

2 个答案: