jQuery：如何将（单选按钮和文本）输入值附加到 div答案

【问题标题】：jQuery: How to append (radio button & text )input value to a divjQuery：如何将（单选按钮和文本）输入值附加到 div
【发布时间】：2012-06-19 18:53:26
【问题描述】：

我有 2 个输入文本字段和 4 个单选按钮。通过单击提交按钮，我希望这些值出现在侧边栏中。因为访问者只能选择一个单选按钮，所以侧边栏中应该出现三个值：品牌、价格和一个选择的方向。

不幸的是，我现在遇到了一个错误：

"error": "请使用 POST 请求"

这是我的代码和 jsFiddle：

HTML：

<h1>Adding an item</h1>
<form>
    <div>
        <input type="text" name="price" id="price" value="price" />
        <input type="text" name="brand" id="brand" value="brand"/> 
        <br/>
        <input type="radio" name="direction" value="up" />  UP
        <input type="radio" name="direction" value="down" /> DOWN
        <input type="radio" name="direction" value="left" />  LEFT
        <input type="radio" name="direction" value="right" /> RIGHT
        <button id="addbutton">add it</button>
      </div>
</form>

<div id="sidebar"><h1>sidebar</h1></div>

JS：

$('#addbutton').click(function() {
    var $addDiv = $('#sidebar');
    $addDiv.append($('#brand' + '#price').val());
});

http://jsfiddle.net/kHuYp/

我的问题是：如何还附加所选单选按钮的值？我必须在我的代码中进行哪些更改才能使错误消失？提前致谢！

【问题讨论】：

标签： jquery html input append

【解决方案1】：

您需要在此行中独立处理每个值：

$addDiv.append($('#brand' + '#price').val());

应该类似于（取决于分隔符）：

 $addDiv.append($('#brand').val() +' '+$('#price').val());

为避免提交表单，请在您的点击处理程序中返回 false

演示：http://jsfiddle.net/kHuYp/3/

【讨论】：