简体   繁体   中英

Iterating through select boxes with jQuery

I have a list of checkboxes (asp.net) each with different classes which represent the amount of points each one is worth (1 or 2 points). My script iterates through all of the checkboxes and looks at the point value of each and returns the total number of points checked. This works great but I can't get the same to work for select boxes. I want to count the point value for each only when the option selected = 'Yes'. I'm not sure how to iterate through them like you do with checkboxes looking for a specific value. Thanks

<script type="text/javascript">
        $(function () {
            var total;
            var checked = $("[class*="Score"] input[type='checkbox']").click(function (e) {
                calculateScore();
            });


            function calculateScore() {
                // 1 point each
                var $checked1 = $(".Score1 :checkbox:not(:checked)")
                total = 0;
                $checked1.each(function () {
                    total += 1
                });

                // Now calculate the two pointers                    
                var $checked2 = $(".Score2 :checkbox:not(:checked)")
                $checked2.each(function () {
                    total += 2
                });

                $('#total').text("Points deducted: " + total);

            }
        });         
</script>

<!--1 point each-->
<asp:CheckBox ID="chkGName" runat="server" CssClass="Score1" />Choice 1
<asp:CheckBox ID="chkGClear" runat="server" CssClass="Score1" />Choice 2
<asp:CheckBox ID="chkGTone" runat="server" CssClass="Score1" />Choice 3

<!--2 points each-->
<asp:CheckBox ID="chkGName" runat="server" CssClass="Score2" />Choice 1
<asp:CheckBox ID="chkGClear" runat="server" CssClass="Score1" />Choice 2
<asp:CheckBox ID="chkGTone" runat="server" CssClass="Score1" />Choice 3

<!--Dropdown boxes-->

<asp:DropDownList ID="ddlScoreK1" runat="server" CssClass="Score1">
<asp:ListItem Text="" Value="" />    
<asp:ListItem Text="Yes" Value="Yes" />
<asp:ListItem Text="No" Value="No" />
<asp:ListItem Text="N/A" Value="N/A" />
</asp:DropDownList>

<asp:DropDownList ID="ddlScoreK2" runat="server" CssClass="Score2">
<asp:ListItem Text="" Value="" />    
<asp:ListItem Text="Yes" Value="Yes" />
<asp:ListItem Text="No" Value="No" />
<asp:ListItem Text="N/A" Value="N/A" />
</asp:DropDownList>

I worked it out if it helps anyone else:

<script type="text/javascript">
$(document).ready(function () {
    $('[class*="Score"]').change(function () {
        calculateScore();
  });

     function calculateScore() {
        var total = 0;
            $(".Score1").each(function () {                    
                if (this.value =='Yes') {
                    total += 1;
                }                    
            });

            $(".Score2").each(function () {
                if (this.value == 'Yes') {
                    total += 2;
                }
            });     
     }
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM