点击Coldfusion list apend

Question

我有一个包含<table>的ColdFusion页面。每行包含一个复选框。每当单击其中一个框时，我需要将该行的值添加到列表中。如何让它在点击时将值添加到列表中，而无需转到操作页面？

我希望在点击时这样做的原因是我可以在每个项目被点击时显示项目的总计值。下面的代码给了我需要的列表，我只需要它点击进行更新。我猜我需要一个JavaScript函数，但我对此很新。

<cfset number = #form.chkbx#> 
<cfloop index="i" from="1" to="#ListLen(form.chkbx)#"> 
    <cfif form.chkbx neq 0> 
    <cfelse> 
    <cfset "vote_number#number#" = #ListGetAt(form.chkbx, i, ",")#> 
    <cfset number = number > 
    </cfif> 
</cfloop> 

<!--- this is just to get rid of an extra digit i get in the end ---> 
<cfif ListLen(number) GT 1> 
    <cfset number = ListDeleteAt(number,ListLen(number))> 
</cfif> 


<!--- 
    My code for the check box preparing it for a javascript 
    function I haven't figured out yet 
---> 
<CFOUTPUT query="qGetOpenItemsTrans"> 
<TR><TD> <input type="checkbox" 
       name="chkbx"id='#ID#' 
       value="#seq_claim_id#" 
       onclick="UpdateCost('#ID#')" 
       unchecked = 0> 

    </TD> 
    <TD ALIGN = "CENTER">#Inventory_Date#</TD> 
    <TD ALIGN = "CENTER">#seq_claim_id#</TD> 
    <TD ALIGN = "CENTER">#Month_Closed#</TD> 
    <TD ALIGN = "CENTER">#Amount_Rcvd_by_FRG#</TD> 
    <TD ALIGN = "CENTER">#Commission_Amt#</TD> 
    <TD ALIGN = "CENTER">#Net_Recovery#</TD> 
</TR> 

即时通讯非常新，我看过jquery，但我不知道从哪里开始做这项工作。我发现了一块jQuery的，但它需要用户点击一个按钮，将通知被检查每一个项目，但我需要的那些值的检查AA逗号delimmeted列表

<script type="text/javascript"> 
$('#sbt_alert_checked_checkbox_val').on("click", function(e){ 

    $('input[name="chkbx"]:checked').each(function(index) { 
    alert($(this).val()); 
    }) 

    e.preventDefault(); 

}); 
</script> 

即时得到更接近于我需要的！这段代码的问题在于，它在检查复选框然后单击将提醒值列表的提交按钮时起作用。我似乎无法得到它的一个复选框被选中，也许我可以在这里的线索

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('#chkbx').click(function() { 


var slvals = [] 
$('input:checkbox[name=chkcountry]:checked').each(function() { 
slvals.push($(this).val()) 
}) 
alert('Selected Checkbox values are: ' + slvals) 
}) 
}); 
</script> 

Answer 1

我想你肯定是使用jQuery来解决问题的正确轨道上的“复选框”每次工作。这听起来像你正在试图用这个脚本来完成一些不同的事情，所以我会做一些假设，并试图告诉你应该做你想做的事情。

到事件处理程序附加到你可以使用复选框：

$('input[type="checkbox"]').on('click', function(){ 
    // test click handler with an alert. this.value 
    // 'this' is the checkbox that was clicked. Access the value using dot notation. 
    alert(this.value); 
}); 

这会提醒你点击任何复选框的值。现在，从您的描述中我明白你不想提醒结果，但是这会让你知道你的点击处理程序正在工作。如果我明白你要做什么，你需要将两个函数调用放入这个处理函数中。

第一个函数将创建一个逗号分隔列表，其中包含已被选中的复选框的值。

function createDelimitedList() { 
    var list = ''; 
    // loop over each checkbox on the page 
    $('input[type="checkbox"]').each(function(index) { 
     // if the checkbox is checked, add its value to the list 
     if (this.prop("checked")){ 
      if (index == 0){ 
       list += this.value; 
      }else{ 
       list += ',' + this.value; 
      } 
     } 
    }); 
    return list; 
} 

函数调用添加到事件处理程序，现在你有一个列表，你可以做的东西有。我不知道你想用它做什么，而是你可以，比方说，使用jQuery将值分配给隐藏字段，以便在表单提交时，您可以将值传递给一些Coldfusion代码。

接下来，您需要为点击的值创建运行总和。这将与列表功能非常相似。

function getCheckboxSum() { 
    var sum = 0; 
    // loop over each checkbox on the page 
    $('input[type="checkbox"]').each(function(index) { 
     // if the checkbox is checked, add its value to the list 
     if (this.prop("checked")){ 
      sum += this.value; 
     } 
    }); 
    return sum; 
} 

现在每一个复选框，点击你的代码，获取所有被点击，并创建一个逗号分隔的列表和值的总和，页面上的复选框的时间。您需要稍微修改一下以确保您获得所需的值，我只是假设您将使用复选框字段的值，但您可以使用jQuery来获取页面中任何字段的值您的功能中的each循环。

所以，现在你的处理函数应该是这样的：

$('input[type="checkbox"]').on('click', function(){ 
    var list = createDelimitedList(); 
    var sum = getCheckboxSum();   
    // now write some code to put the values where you want them 
}); 

此代码对你的HTML布局的几个假设，并配不附带哈哈，但是这通常是我如何将接近类似问题。