求助！！无法监听到两个radio的click 或者 change事件

[chinaren502]

求助，这是HTML中的代码，主要是一个Morris图表，用户可以选择 【折线图或者柱状图】，进行切换,页面代码分别选择折线图或者柱状图脚本都能顺利执行，可就是脚本中无法监听到两个radio的click 或者 change事件，无法动态切换，不知何故哦

                <div class="col-md-8">
                    <div class="panel">
                        <div class="panel-body" id="toggle-chart">
                            <div class="row revenue-states">
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <h4>变化趋势</h4>
                                    <div class="icheck" >
                                       <div class="square-red single-row">
                                            <div class="radio ">
                                                <input type="radio"  checked="checked" name="demo-radio" id="chartType1" value="line"/>
                                                <label for ="chartType2">折线图</label>
                                            </div>
                                        </div>
                                        <div class="square-red single-row">
                                            <div class="radio ">
                                                <input type="radio"  name="demo-radio" id="chartType2" value="bar"/>
                                                <label for="chartType2">柱状图</label>
                                            </div>
                                        </div>

                                    </div>
                                 

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="clearfix">
                                        <div id="main-chart-legend" class="pull-right">
                                        </div>
                                    </div>

                                    <div class="panel-body">
                                         <div id="graph-line"></div>
                                    </div>
 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

这是js脚本

$(function () {

var day_data = eval("[" + document.getElementById("TzxData").value + "]");
 
function ToggleSeries() {
    $("#graph-line").empty();
    $("#toggle-chart input[type='radio']").each(function () {
        if ($(this).is(":checked")) {
            if ($(this).val() == "line") {
                Morris.Line({
                    element: 'graph-line',
                    data: day_data,
                    //此处省略
                });
            } else {
                Morris.Bar({
                    element: 'graph-line',
                    data: day_data,
                   //此处省略
                });
                
            }
        }
    });
}

$("#toggle-chart input").change(function () {
    ToggleSeries();
});


ToggleSeries();

});

[囧]

2个lable的for是一样的 for="chartType2"

[chinaren502]

改过第一个label后的for ，还是不行哦

[囧]

测试是触发了change事件的，检测下Morris是否支持重绘

[qq_16435051]

建议你查看源码 估计已经把radio转其他元素了

[槿畔]

看你的意思是无法具体监听到事件?首先正确的话change事件肯定会执行的,你在调用ToggleSeries();之前console.log('test')观察是否执行,如果执行了,就说明事件执行了,请移步看你的js逻辑代码是否正确,如果没有打印,你直接在html结构中 onChange="ToggleSeries()"

[chinaren502]

//这里代码如上
//接下来
$("#toggle-chart input").change(function () {
    alert("测试change");  //这里在选择radio的时候 不执行
    ToggleSeries();
});

alert("测试");   //这里是执行成功的。
ToggleSeries();

请大牛看看 是我的语法有问题吗？ 还是监听不到 change事件哦

[Hello World,]

用click，不用change

[chinaren502]

谢谢各位，问题找到了，我给这个radio 设置了 css样式，取消后就可以了。可问题是原生的 radio 很难看，不能美化吗？ 或者css样式有什么要求吗？实在搞不懂，还请大师帮忙哦

[摩卡瓦图]

用class来写样式用Id来应该不会冲突。。。是不是用id写了样式导致的冲突？ 而且js也可以写入样式。

[槿畔]

看你的意思应该是解决了,至于css样式最好是你自己试着去封装一下,其原理就是用把你的input设置opcity:0;然后用span标签进行定位 position: absolute;,在span上去写你自己想要样式.现在基本上ui插件都是这样封装的