Заполните div с конкретной информацией из флажка - PullRequest
Новая
       4

Заполните div с конкретной информацией из флажка

1 голос
/ 29 марта 2011

Я пытаюсь получить, когда нажимаю на указанный флажок, он заменит текст в указанном div с меткой флажка, и если установлен более одного флажка, он будет помещен с, и если текст должен быть длинным с указанием суммы, за которой следует ...

мой 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 не является полным, если не считать функцию флажка, как это был еще один пример, который я видел здесь, но не дал правильного ответа.

Ответы [ 2 ]

1 голос
/ 29 марта 2011

что-то вроде ... 

$(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 />
0 голосов
/ 29 марта 2011 
$("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.

...