取消勾选复选框，同时检查另一个

我有这段代码，但它不起作用。它在小提琴上工作（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>

我在做什么错？

来源

2017-09-15 Kenneth

要么把脚本的输入下，或者使用的document.ready函数（在jQuery是为'一样简单$（...）;'我相信 –

你有没有考虑过使用单选按钮？ – Scimonster

你的示例代码在这里也完全失去了jQuery，你只有jQuery UI（两次）。 – Esko

<!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> 
</head> 

<body> 
<input type="checkbox" class="example" /> 
<input type="checkbox" class="example" /> 
<input type="checkbox" class="example" /> 
<input type="checkbox" class="example" /> 
<script language="JavaScript" type="text/JavaScript"> 
$('input.example').on('change', function() { 
    $('input.example').not(this).prop('checked', false); 
}); 
</script> 
</body> 
</html>

移动您的JavaScript代码，因为当JS执行您的输入不存在。

否则，你可以添加$（document）.ready函数执行的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="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>

来源

2017-09-15 07:25:26 GGO

这段代码有效，我测试过了;） – GGO

试试看看：http：//www.cmyworkout.dk/m/test_checkbox.php – Kenneth

是的..它现在的作品:-)谢谢..伴侣 – Kenneth

你需要运行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>

来源

2017-09-15 07:27:04

我试过这个代码，但它仍然无法正常工作，是的两个jquery文件在文件夹js/1.9.2 / – Kenneth

只要把你的代码准备功能。

$(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> 这个脚本工作:)

来源

2017-09-15 10:11:39 Anuresh

取消勾选复选框，同时检查另一个

回答

相关问题