点击即可弹出冷融合列表

Coldfusion list apend on click

本文关键字：融合 列表      更新时间：2023-09-26

我有一个包含<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，但它需要用户点击一个按钮，并会提醒每个被检查的项目，但我需要一个逗号分隔的列表，列出被检查的的值

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

我认为使用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的布局做了一些假设，并且没有保证哈哈，但这通常是我处理类似问题的方式。

相关文章：