Javascript 在下拉选择和复选框选择时更新HTML

我有一个下拉列表，附带一些javascript和jquery，根据选择显示一些文本和一个复选框。如果勾选该复选框，则显示的HTML将再次更改。文本和复选框将显示，但选中复选框时，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>

请选择您的移动计划
包1
方案2
方案3
方案4
方案5
方案6

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

$（函数（）{
$（'#myselect'）。更改（函数（）{
var val=$（this.val（）；
如果（val='1'）{
$（'.plan-details1'）.html（'这正在工作1
'）；
$（'.plan price'）.html（'价格：&euro；18手机'）；
}
如果（val='2'）{
$（'.plan-details1'）.html（'这正在工作2
'）；
$（'.plan price'）.html（'price:&euro；25手机'）；
}
如果（val='3'）{
$（'.plan-details1'）.html（'这正在工作3
'）；
}
如果（val='4'）{
$（'.plan-details1'）.html（'这正在工作4
'）；
}
如果（val='5'）{
$（'.plan-details1'）.html（'这正在工作5
'）；
}
如果（val='6'）{
$（'.plan details'）.html（'这正在工作6
'）；
}
});
});
函数验证（）{
if（document.getElementById（'handset-m'）。选中）{
document.getElementById（'price-m'）。innerHTML='price:&euro；20'；
}否则{
document.getElementById（'price-m'）。innerHTML='price:&euro；18'；
}
if（document.getElementById（'handset-l'）。选中）{
document.getElementById（'price-l'）。innerHTML='price:&euro；35'；
}否则{
document.getElementById（'price-l'）。innerHTML='price:&euro；25'；
}
}

可以在这里找到小提琴：

非常感谢你的帮助

编辑：

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

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

范围问题

您可以尝试将侦听器放在复选框中，也可以在document.ready中声明函数

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

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

我更新了

请注意，您的功能并非真正有效，您应该在测试元素（“handset-m”和“handset-l”）是否被检查之前测试它们的存在

编辑

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

---

这不起作用，因为您将复选框作为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;
        }

---

forked fiddle->

尝试在更改处理程序外部为$（'.plan-details1'）声明一个变量，并使用此变量，而不是在每次复选框更改时反复声明jquery对象。您可以对正在重用的所有jquery对象执行此操作。感谢您的回答，但此操作仍然无法正常运行。当我试图从日志中查看错误时，给出了以下信息：

uncaughttypeerror:cannotread属性'checked'为null

还要注意，在发布的答案中，您可能会将多个事件绑定到单击。如果将验证更改为。单击小提琴中的（函数（）{alert（“hi”）}），选择1，单击对象，选择其他对象，再次选择1，单击对象，函数运行两次。验证在全局范围内。你认为它属于什么？@user3025379不客气！有时候，你只需要对问题有新的认识。我自己也可能在那里，从来没有想过插入标记才是问题所在，但还有很多其他事情：）

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