选择一个复选框并在单独的行中获取相关文本

时间:2015-01-29 05:56:51

标签: jquery

这是在名称相同时将复选框的关联文本放在单独的行中的问题的解决方案。

HTML代码 -

<p><input name="SiteLayoutDesign" value="5" type="checkbox"> I do not need any unique graphics designed (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="6" type="checkbox"> I will supply images (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="7" type="checkbox"> I have a template but it needs minor customization (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="8" type="checkbox"> I need a template customized (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="9" type="checkbox"> I would like a custom design created for my site (0 Hours)</p>

jQuery Code-

$(document).ready(function(){
    $('input').click(function(){
        var $check = $('input[type=checkbox]:checked');
        $check.each(function(){
            var id = $(this).val();
            var did = $('input[type=checkbox][value='+id+']:checked').closest('p').text();

        });
    });
});

did变量存储关于该checkBox值的关联文本。

2 个答案:

答案 0 :(得分:0)

function SelectallColorsForStyle(e, eval) {
        if (e.checked) {
            $(":checkbox[value=" + eval + "]").prop("checked", e.checked);

            if (!$('input.checkboxselection[type=checkbox]:not(:checked)').length)
                $("#CHK_STY_ALL").prop("checked", true);

            if (!$('input.chk_clr_ind[type=checkbox]:not(:checked)').length)
                $("#chk_clr_sel_all").prop("checked", true);
        }
        else {
            $(":checkbox[value=" + eval + "]").attr('checked', false);
            $("#CHK_STY_ALL").attr("checked", false);
            $("#chk_clr_sel_all").attr("checked", false);
        }
    }

上面的代码以相同的值运行。您可以根据自己的要求将其更改为名称。

参考DEMO

答案 1 :(得分:0)

    First thing I dont understand why you are using '$' for javascript variable declaration and this is wrong.

    Next thing you have a bad logic.

    try this:

    <script type="text/javascript">
        $(document).ready(function(){
        $('input').click(function(){ // whenever  an input tag is clicked not sure why you want to run this for all inputs like text, textarea etc
             $('input[type=checkbox]').each(function(){//for every input of kind checkbox 
                if($(this).is(':checked')){//check if this instance of check box is checked
                var id = $(this).val();//if true get the value of this checkbox 
                            var did = $('input[type=checkbox][value='+id+']:checked').closest('p').innerhtml();//for matching input type checkbox and value get the closest P and get its innerhtml. 
//warning: here you will get 2 closest P's for every checkbox except for first 
    }

            });
        });
    });
        </script>

上面的脚本产生的输出我不确定与你想要的相同。但它肯定会帮助你做出修改并实现你正在努力的目标