如何在jQuery中显示除输入标签之外的文本

Question

单击按钮时，我想在另一个元素中的单选按钮旁边显示文本。

我的HTML：

<p>
<input type="radio" value="1" name="General">
I need a simple template
</p>
<p>
<input type="radio" value="2" name="General">
I need a simple template based
</p>
<p>
<input type="radio" value="3" name="General">
I need a simple template based type
</p>

我想将结果显示在具有类display的元素中，因此类似：

$('.display').val();

我尝试了这个：

$('.display').val($('input[type=radio]:checked').closest('p').html());

Answer 1

我猜想您想要做的是将与所选单选按钮关联的文本放在.display元素中。 如果是这样，与您当前的HTML，你可以使用.text父元素来获取文本，然后可能.text （不.val上） .display单元显示它（这将是.val如果.display了表单字段）：

 $("input[name=General]").on("click", function() { var text = $(this).closest('p').text(); $(".display").text(text); }); 

 <p> <input type="radio" value="1" name="General"> I need a simple template </p> <p> <input type="radio" value="2" name="General"> I need a simple template based </p> <p> <input type="radio" value="3" name="General"> I need a simple template based type </p> <p class="display"></p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

---

但是 ，最好使用label元素，以便用户可以单击单词以及实际的单选按钮：

 $("input[name=General]").on("click", function() { var text = $(this).closest('label').text(); $(".display").text(text); }); 

 <p> <label> <input type="radio" value="1" name="General"> I need a simple template </label> </p> <p> <label> <input type="radio" value="2" name="General"> I need a simple template based </label> </p> <p> <label> <input type="radio" value="3" name="General"> I need a simple template based type </label> </p> <p class="display"></p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 2

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

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代码-

$(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变量存储有关该复选框值的关联文本。