如何获取复选框的跨度值并在jquery中的文本框中显示?

时间:2012-11-03 08:00:15

标签: jquery addition

嗨所有在jquery工作的iam我在span标签中有一个值我需要获得该值并且需要在文本框中显示一旦被检查并且如果我检查倍数boxex我需要添加这些值并且必须在文本框中显示

这里我的代码如下:

        <input type="checkbox"  />
        <span>100</span>
        <div class="clear"></div>
        <input type="checkbox" />
        <span>200</span>
        <div class="clear"></div>
        <input type="checkbox" />
        <span>300</span>
        <div class="clear"></div>
        <input type="checkbox" />
        <span>400</span>
         <input type="text" />

任何人都可以提前帮助完成这项工作

2 个答案:

答案 0 :(得分:1)

使用next方法,您可以选中复选框的下一个兄弟节点。

$('input[type=checkbox]').change(function(){
      var val = 0;
      $('input[type=checkbox]:checked').each(function(){
          val += parseInt( $(this).next().text(), 10 )    
      })  

     $('input[type=text]').val(val)
})

答案 1 :(得分:1)

您可以使用此代码收集所有选中的值。

如果您将HTML更改为:

<button id="go">Test</button>
<div class="container">
    <input type="checkbox"  />
    <span>100</span>
</div>
<div class="container">
    <input type="checkbox" />
    <span>200</span>
</div>
<div class="container">
    <input type="checkbox" />
    <span>300</span>
</div>
<div class="container">
    <input type="checkbox" />
    <span>400</span>

</div>
<input id="results" type="text">​

然后,您可以使用它来收集所有复选框中的文本。您可以在不更改HTML的情况下执行此操作,但这样可以更加清晰,更安全。

$(document).ready(function() {
    $("#go").click(function() {
        var data = $("input:checked").map(function() {
            return $(this).closest(".container").find("span").text();
        }).get().join(", ");
        $("#results").val(data);
    });
});​

工作演示:http://jsfiddle.net/jfriend00/jLEDC/