Question

我有一个下拉列表，附有一些javascript＆amp; jquery根据选择显示一些文本和复选框。如果选中该复选框，则显示的HTML将再次更改。文字＆amp;复选框正在显示但是当检查复选框时，html不会改变。

HTML：

<div class="plan">
    <div class="plan-details1"></div>
    <div class="plan-name">
        <select id="myselect">
            <option value="0">Please Select Your Mobile Plan</option>
            <option value="1">Package 1</option>
            <option value="2">Package 2</option>
            <option value="3">Package 3</option>
            <option value="4">Package 4</option>
            <option value="5">Package 5</option>
            <option value="6">Package 6</option>
        </select>
    </div>
    <div class="plan-price"></div>
</div>

JS

$(function () {
    $('#myselect').change(function () {
        var val = $(this).val();

        if (val == '1') {
            $('.plan-details1').html('This Is Working 1<br/>');
            $('.plan-price').html('<div id="price-m">Price: &euro;18</div><input type="checkbox" id="handset-m" value="Car" onClick="validate()"> Handset');
        }

        if (val == '2') {
            $('.plan-details1').html('This Is Working 2<br/>');
            $('.plan-price').html('<div id="price-l">Price: &euro;25</div><input type="checkbox" id="handset-l" value="Car" onClick="validate()"> Handset');
        }

        if (val == '3') {
            $('.plan-details1').html('This Is Working 3<br/>');
        }

        if (val == '4') {
            $('.plan-details1').html('This Is Working 4<br/>');
        }

        if (val == '5') {
            $('.plan-details1').html('This Is Working 5<br/>');
        }

        if (val == '6') {
            $('.plan-details').html('This Is Working 6<br/>');
        }

    });
});

function validate() {
        if (document.getElementById('handset-m').checked) {
            document.getElementById('price-m').innerHTML = 'Price: &euro;20';
        } else {
            document.getElementById('price-m').innerHTML = 'Price: &euro;18';
        }

        if (document.getElementById('handset-l').checked) {
            document.getElementById('price-l').innerHTML = 'Price: &euro;35';
        } else {
            document.getElementById('price-l').innerHTML = 'Price: &euro;25';
        }
    }

这里可以找到一个小提琴：http://jsfiddle.net/5Y4b6/

非常感谢你的帮助！

Answer 1

这不起作用，因为您将复选框插入为HTML标记。 onclick处理程序永远不会附加到实际函数。将您的代码更改为：

 if (val == '1') {
            $('.plan-details1').html('This Is Working 1<br/>');
            $('.plan-price').html('<div id="price-m">Price: &euro;18</div><input type="checkbox" id="handset-m" value="Car"> Handset');
            document.getElementById("handset-m").onclick = validate;
        }

        if (val == '2') {
            $('.plan-details1').html('This Is Working 2<br/>');
            $('.plan-price').html('<div id="price-l">Price: &euro;25</div><input type="checkbox" id="handset-l" value="Car"> Handset');
            document.getElementById("handset-l").onclick = validate;
        }

现在，这些复选框实际上已附加到validate()功能。顺便说一下，更改验证功能以检查复选框是否存在/是否插入以避免＆＃34; 无法设置检查空值＆＃34;错误：

function validate() {
    if (document.getElementById('handset-m')) {
        if (document.getElementById('handset-m').checked) {
            document.getElementById('price-m').innerHTML = 'Price: &euro;20';
        } else {
            document.getElementById('price-m').innerHTML = 'Price: &euro;18';
        }
    }
    if (document.getElementById('handset-l')) {
        if (document.getElementById('handset-l').checked) {
            document.getElementById('price-l').innerHTML = 'Price: &euro;35';
        } else {
            document.getElementById('price-l').innerHTML = 'Price: &euro;25';
        }
    }
}

分叉小提琴 - ＆gt;的 http://jsfiddle.net/8upk3/

Answer 2

编辑：

validate实际上是在全局范围内，但问题在于validate函数本身：这是一个固定版本：

function validate() {
    if(document.getElementById('handset-m')) {
        if (document.getElementById('handset-m').checked) {
            document.getElementById('price-m').innerHTML = 'Price: &euro;20';
        } else {
            document.getElementById('price-m').innerHTML = 'Price: &euro;18';
        }
    }
    if (document.getElementById('handset-l')) {
        if (document.getElementById('handset-l').checked) {
            document.getElementById('price-l').innerHTML = 'Price: &euro;35';
        } else {
            document.getElementById('price-l').innerHTML = 'Price: &euro;25';
        }
    }
}

Answer 3

范围问题。

您可以尝试将监听器放在复选框上，也可以在文档中声明您的功能。已经

validate = function() {
    if (document.getElementById('handset-m').checked) {
        document.getElementById('price-m').innerHTML = 'Price: &euro;20';
    } else {
        document.getElementById('price-m').innerHTML = 'Price: &euro;18';
    }

    if (document.getElementById('handset-l').checked) {
        document.getElementById('price-l').innerHTML = 'Price: &euro;35';
    } else {
        document.getElementById('price-l').innerHTML = 'Price: &euro;25';
    }
};

我更新了your fiddle here

请注意，您的功能效率不高，您应该测试元素的存在（＆＃39;手机-m＆＃39;，＆＃39;＆＃39;手机-l＆＃39; ...）在测试之前是否经过检查。

修改

这是另一种使用jQuery监听器的方法：

$('#plan').on('click','#handset-m, #handset-l', function(){console.log('test'); $this = $(this); id = this.id; var lbl = 'Price: €'; if(true === $this.prop('checked')){ lbl += ('handset-m' === id) ? '20' : '35'; } else { lbl += ('handset-m' === id) ? '18' : '25'; } $this.prev('div').html(lbl); });

fiddle here

通过下拉选项和复选框选择更新HTML

3 个答案: