0

What I am trying to do is getting the value from a group of radio buttons and output the value after a little calculation is a text field. I tried the codes below, but nothings seems to work. Sorry, but I don't have too much knowledge in jQuery/JavaScript and seeking help.

HTML:

        <label for="ctype">
            <b>Construction Type</b>
            <table>
                <tr><td>Timber:</td><td><input type="radio" name="ctype" value="Timber"></td></tr>
                <tr><td>Brick:</td><td><input type="radio" name="ctype" value="Brick"></td></tr>
                <tr><td>Concrete:</td><td><input type="radio" name="ctype" value="Concrete"></td></tr>
            </table>
        </label>

        <!-- Roof Type -->
        <label for="rtype">
            <b>Roof Type</b>
            <table>
                <tr><td>Metal:</td><td><input type="radio" name="rtype" value="Metal"></td></tr>
                <tr><td>Tile:</td><td><input type="radio" name="rtype" value="Tile"></td></tr>
                <tr><td>Concrete:</td><td><input type="radio" name="rtype" value="Concrete"></td></tr>
            </table>
        </label>

        <!-- Roof Insulation -->
        <label for="rins">
            <b>Insulation In Roof</b>
            <table>
                <tr><td>Yes:</td><td><input type="radio" name="rins" value="Yes"></td></tr>
                <tr><td>No:</td><td><input type="radio" name="rins" value="No"></td></tr>
            </table>
        </label>

        <table>
            <tr><td><label for="cvars">Variables:</label></td><td><input type="text" name="cvars" class="cvars" value="0"> Squere Meters</td></tr>
        <table>

JavaScript 

/* Form Processing */
jQuery(document).ready(function() {
// Process Construction Type
jQuery('input:radio[name=ctype]').change(function() {
    var ctype = $('input:radio[name=ctype]:checked').val();

    if ( ctype == 'Timber' ) {
        jQuery('.cvars').val( $('.cvars').val() + 2 );
    } else if ( ctype == 'Brick' ) {
        jQuery('.cvars').val( $('.cvars').val() + 1 );
    } else if ( ctype == 'Concrete' ) {
        jQuery('.cvars').val( $('.cvars').val() + 1 );
    }

});

// Process Roof Type
jQuery('input:radio[name=rtype]').change(function() {
    var ctype = $('input:radio[name=rtype]:checked').val();

    if ( ctype == 'Metal' ) {
        jQuery('.cvars').val( $('.cvars').val() + 4 );
    } else if ( ctype == 'Tile' ) {
        jQuery('.cvars').val( $('.cvars').val() + 0 );
    } else if ( ctype == 'Concrete' ) {
        jQuery('.cvars').val( $('.cvars').val() + 0 );
    }

});

});

Basically, when someone selects the construction type, a value based on the type is automatically adjusted (added or substrated) in the text field named cvars. Similarly, when choosing the roof type, a value (adding to the current value) based on the type is adjusted to the vars text field and so on..

Please someone help me on this.

4

1 回答 1

1

用于parseInt在添加之前解析整数值，示例：

更新值调整

var cAdded = 0;
var rAdded = 0;

jQuery(document).ready(function() {
// Process Construction Type
    jQuery('input:radio[name=ctype]').change(function() {
        var ctype = $('input:radio[name=ctype]:checked').val();
        if (ctype == 'Timber') {
            jQuery('.cvars').val(parseInt($('.cvars').val()) + (2 - cAdded));
            cAdded = 2;
        } else if (ctype == 'Brick') {
            jQuery('.cvars').val(parseInt($('.cvars').val()) + (1 - cAdded));
            cAdded = 1;
        } else if (ctype == 'Concrete') {
            jQuery('.cvars').val(parseInt($('.cvars').val()) + (1 - cAdded));
            cAdded = 1;
        }

    });

// Process Roof Type
    jQuery('input:radio[name=rtype]').change(function() {
        var ctype = $('input:radio[name=rtype]:checked').val();

        if (ctype == 'Metal') {
            jQuery('.cvars').val(parseInt($('.cvars').val()) + (4 - rAdded));
             rAdded = 4;
        } else if (ctype == 'Tile') {
            jQuery('.cvars').val(parseInt($('.cvars').val()) + (0 - rAdded));
            rAdded = 0;
        } else if (ctype == 'Concrete') {
            jQuery('.cvars').val(parseInt($('.cvars').val()) + (0 - rAdded));
            rAdded = 0;
        }

    });

});

jsFiddle

于 2013-07-21T12:03:08.220 回答