Question

我有这段代码，但它不起作用。它适用于小提琴（http://jsfiddle.net/MQM8k/）但是当我尝试从我的网站运行它时它不起作用？

这是我的代码：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test checkbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/1.9.2/jquery-ui.js"></script>
<script src="js/1.9.2/jquery-ui-min.js"></script>
<script language="JavaScript" type="text/JavaScript">
$('input.example').on('change', function() {
    $('input.example').not(this).prop('checked', false);  
});
</script>
</head>

<body>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
</body>
</html>

我做错了什么？

Answer 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test checkbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="js/1.9.2/jquery-ui-min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('input.example').on('change', function() {
            $('input.example').not(this).prop('checked', false);  
        });
    });</script>
</head>
<body>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
</body>
</html>

移动你的javascript代码，因为当执行JS时你的输入还不存在。

否则你可以添加$（document）.ready函数来等待页面加载结束，然后再执行js代码：

Highcharts.setOptions({
  lang: {
    drillUpText: '<< Back'
  }
});

Highcharts.chart('recoveryGraf', {
  chart: {
    type: 'pie'
  },
  title: {
    text: ''
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.name}: {point.y:.1f}%'
      }
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    colors: ['#005eb8', '#56b6cc', '#8bc540'],
    data: [{
      name: 'Potential for further recovery',
      y: 6,
      drilldown: null
    }, {
      name: 'Non-recoverable<br>(e.g. tissue,wallpaper,etc)',
      y: 22,
      drilldown: null
    }, {
      name: 'Recycled',
      y: 72,
      drilldown: 'Recycleds'
    }]
  }],
  drilldown: {
    series: [{
      name: 'Recycleds',
      id: 'Recycleds',
      colors: ['#57a133', '#8bc540'],
      data: [
        ['Exported', 16],
        ['Used Europe', 84]
      ]
    }]
  }
});

Answer 2

当文档准备就绪时，您需要运行JS。加载jquery-ui.js和jquery-uy.min.js也没有意义。您需要先加载jquery然后再加载jquery-ui（如果需要）。

对于我的轰鸣声示例，我假设存在js / 1.9.2 / jquery.js。

试试这段代码：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test checkbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/1.9.2/jquery.js"></script>
<script src="js/1.9.2/jquery-ui-min.js"></script>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
    $('input.example').on('change', function() {
        $('input.example').not(this).prop('checked', false);  
    })
});
</script>
</head>

<body>
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
<input type="checkbox" class="example" />
</body>

Answer 3

只需将代码置于就绪功能中即可。

 $(document).ready(function(){
        $('input.example').on('change', function() {
            $('input.example').not(this).prop('checked', false);  
        });
    });

我认为你不需要<script src="js/1.9.2/jquery-ui-min.js"></script> 让这个脚本工作：）

选中另一个复选框时取消选中该复选框

3 个答案: