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

<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布局做了一些假设，并且没有保修哈哈，但这通常是我如何解决类似的问题。

Coldfusion列表附加onclick

1 个答案: