jquery在单击单选按钮时添加和减去值

时间:2011-01-30 11:19:49

标签: javascript jquery

我试图在用户点击单选按钮时添加和减去值。所有单选按钮都是从数据库值动态创建的。

一个标题内可能有多个类别,但用户只能选择一个。当用户选择其他选项时,我无法减去该值。

如果你很友好;),你可以在你的编辑器中检查这个粘贴(哦,是的..在编程方面,我是一个全新的人。)

非常感谢任何解决方案或不同的方法。

...谢谢

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.active {
 background: #ccc;
}
.program {
 border:1px solid blue;
}
.program td, .program th {
 padding:10px;
 border:1px solid grey;
}
.grandTotal {
 width:200px;
 height:35px;
 font-size:18px;
 font-weight:bold;
 text-align:center;
 line-height:35px;
 background-color:#999;
 margin-top:35px;
}
</style>
</head>

<body>
<div class="program-box">
  <span>You can select or deselect the radio button</span>
  <h2>Heading1</h2>
  <table class="program" cellpadding="0" cellspacing="1">
    <tr>
      <th class="w-5"></th>
      <th class="w-35">Name</th>
      <th class="w-30">Location</th>
      <th class="w-10">#days</th>
      <th class="w-10">Price</th>
    </tr>
    <tr>
      <td><input name=cat1 value=3 id=3 type='radio' class='v'/></td>
      <td>categeory 1</td>
      <td>location1</td>
      <td>5</td>
      <td class="price1">100</td>
    </tr>
  </table>
  <h2>Heading2</h2>
  <table class="program" cellpadding="0" cellspacing="1">
    <tr>
      <th class="w-5"></th>
      <th class="w-35">Name</th>
      <th class="w-30">Location</th>
      <th class="w-10">#days</th>
      <th class="w-10">Price</th>
    </tr>
    <tr>
      <td><input name=cat2 value=1 id=1 type='radio' class='v'/></td>
      <td>category2</td>
      <td>location2</td>
      <td>4</td>
      <td class="price1">200</td>
    </tr>
    <tr>
      <td><input name=cat2 value=2 id=2 type='radio' class='v'/></td>
      <td>category2</td>
      <td>location3</td>
      <td>8</td>
      <td class="price1">150</td>
    </tr>
  </table>

  <div class="price">
    <div class="grandTotal">1800</div>
  </div>
</div>
</div>
<script type="text/javascript">

$(document).ready(function () {

  $("input[type='radio']").mousedown(function(e) {
                if ($(this).attr("checked") == true) {

                   setTimeout("$('input[id=" + $(this).attr('id') + "]').removeAttr('checked');", 200);
       }
                else {
                    return true
                }
            });


});

 $(".v").click(function() {


  $(this).toggleClass("active");


  $(this).closest('.program').find('.v').not(this).removeClass('active');


  var actPrice = 1800; // default 1800
  actPrice = parseInt(actPrice); // convert this to integer


  var isSet = $(this).hasClass("active");


  var grandTotal=$(".grandTotal").text();

  if (grandTotal=="")
  {
   //alert('no total till now');
   var grandTotal=0;
  } else {
   grandTotal=parseInt(grandTotal);
   //alert(grandTotal);
  }


  var div=parseInt($(this).closest('tr').find(".price1").text());

  if(isSet)
  {
   if(grandTotal>0){
    var total = grandTotal+div;
   } else {
    var total = actPrice+div;
   }
   //alert(total);
   $(".grandTotal").html(total);
  } else 
  {
   var div2 = parseInt($(this).closest('tr').find(".price1").text());
   var newTotal = grandTotal-div2;
   $(".grandTotal").html(newTotal);

  }


 });


</script>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

你非常接近!我稍微修改了你的代码并清理了一些东西,但你几乎就在那里:

$(document).ready(function() {
    $("input[type='radio']").mousedown(function(e) {
        var self = this;
        /* Use 'checked' property instead of wrapping in jQuery object */
        if (self.checked) {
            /* Use setTimeout with a function instead of JS string */
            setTimeout(function() {
                self.checked = false;
            }, 200);
        }
        else {
            return true;
        }
    });
    /* Assign click handler inside document.ready: */
    $(".v").click(function() {
        /* Cache selectors that are used over and over: */
        var $this = $(this);
        var $grandTotalContainer = $(".grandTotal");

        /* Call parseInt with radix parameter: */
        var grandTotal = parseInt($grandTotalContainer.text(), 10);
        var price =
            parseInt($this.closest('tr').find(".price1").text(), 10);
        var siblingAmounts = 0;
        var name = $this.attr("name");

        /* Find prices of items in the same "group": */   
        $("input[name='" + name + "'].active")
            .not($this)
            .each(function() {
                siblingAmounts +=
                    parseInt($(this).closest("tr").find(".price1").text(), 10);
            });

        $this.toggleClass("active");
        $("input[name='" + name + "']").not($this).removeClass("active");

        if ($this.hasClass("active")) {
            grandTotal -= siblingAmounts;
            grandTotal += price;
        }
        else {
            grandTotal -= price;
        }
        $grandTotalContainer.html(grandTotal);
    });
});

备注:

  • 使用JavaScript字符串而不是函数调用setInterval被视为不良做法,因为它会调用eval() which can cause problems
  • 直接访问工作的DOM元素属性,最好将this包装在jQuery对象中,并使用jQuery方法访问这些属性。
  • 强烈建议使用radix参数调用parseInt,否则JavaScript会尝试使用基数。
  • 我删除了使用默认总计的代码,并解析了总计div中的值。
  • 我使用attribute equals selector
  • 选择点击的input的兄弟姐妹
  • 确保并缓存您反复使用的jQuery结果。执行jQuery函数会产生开销,如果缓存查询结果,可以避免这些函数。
  • 您不应将整数用作id用于HTML元素,因为它们在HTML 4.01规范下无效。

以下是一个有效的例子:http://jsfiddle.net/andrewwhitaker/8Atf8/1/

希望有所帮助!