0

私がやろうとしているのは、ラジオ ボタンのグループから値を取得し、少し計算した後に値をテキスト フィールドに出力することです。以下のコードを試しましたが、何も機能していないようです。申し訳ありませんが、私は jQuery/JavaScript に関する知識があまりなく、助けを求めているわけではありません。

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 );
    }

});

});

基本的に、誰かが構築タイプを選択すると、タイプに基づく値が cvars というテキスト フィールドで自動的に調整 (追加またはサブストレート) されます。同様に、屋根のタイプを選択すると、そのタイプに基づく値 (現在の値に追加) が vars テキスト フィールドなどに調整されます。

誰かがこれについて私を助けてください。

4

1 に答える 1