Question

我正在尝试一个简单的jQuery测试 *简单的HTML表格，带有输入复选框 * jQuery在点击任何复选框时踢出一些数据。

似乎在fiddle.net中工作就好......：http://jsfiddle.net/UBVwL/

但是当我用这个东西制作一个'测试'页面时......它不起作用？我在这里可能会遗漏和/或做错什么？

jQuery的：

$('.orderTable').on('click', 'input:checkbox', function () {
    if ($(this).is(":checked")) {
        var group = "input:checkbox[id='" + $(this).attr("id") + "']";
        $(group).prop("checked", false);
        $(this).prop("checked", true);
    } else {
        $(this).prop("checked", false);
    }
    console.log(group);
});

基本HTML：

<body>
<table class="orderTable">
    <tr>
        <td class="optionClass testimonialCell"><label><input id="testimonial" name="TestimonialHistory" type="checkbox" />&nbsp;Testimonial History</label></td>
    </tr>
    <tr>
        <td class="optionClass challengesCell"><label><input id="challenges" name="Challenges" type="checkbox" />&nbsp;Challenges</label></td>
    </tr>
    <tr>
        <td class="optionClass licenseCell"><label><input id="statelincensediscipline" name="StateLicenseDiscipline" type="checkbox" />&nbsp;State License Discipline</label></td>
    </tr>
    <tr>
        <td class="optionClass articleswrittenCell"><label><input id="articleswritten" name="ArticlesWritten" type="checkbox" />&nbsp;Expert Written Articles </label></td>
    </tr>
    <tr>
        <td class="optionClass articlesNameingCell"><label><input id="articlesnaming" name="ArticlesNaming" type="checkbox" />&nbsp;Articles Naming Expert</label></td>
    </tr>
</table>
</body>

这就是我的头脑:( jQuery代码在哪里）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>


<head>
<title>Some Title</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="JavaScript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<script>

//what version of jQuery is being loaded
alert("JQ version: " + $.fn.jquery);
console.log("JQ version: " + $.fn.jquery);

$('.orderTable').on('click', 'input:checkbox', function () {
if ($(this).is(":checked")) {
    var group = "input:checkbox[id='" + $(this).attr("id") + "']";
    $(group).prop("checked", false);
    $(this).prop("checked", true);
} else {
    $(this).prop("checked", false);
}
console.log(group);
});
</script>

</head>

我也尝试了其他几种方法......但是当没有在jsfiddle.net中时似乎没有工作:(

替代示例1：

$("input").click(function () {
if ($(this).is(":checked")) {
    var group = "input:checkbox[name='" + $(this).attr("name") + "']";
    $(group).prop("checked", false);
    $(this).prop("checked", true);
} else {
    $(this).prop("checked", false);
}
console.log('clicked');
});

替代示例2：

$('.orderOptions').on('click', 'input:checkbox', function () {
if ($(this).is(":checked")) {
    var group = "input:checkbox[id='" + $(this).attr("id") + "']";
    //var group = "input:checkbox[name='" + $(this).attr("name") + "']";
    $(group).prop("checked", false);
    $(this).prop("checked", true);
} else {
    $(this).prop("checked", false);
}
console.log(group);
});

Answer 1

你错过了

$(function(){  // DOM IS NOW READY

    /* YOUR CODE HERE */

});

jQuery docs .ready()

Answer 2

您的jQuery代码位于<head>。在处理此代码时，HTML元素不存在。你必须推迟执行。将代码包装在

中

jQuery(document).ready (function (){ 
    // your code here
});

Answer 3

如果您在文件系统上的独立文件中对此进行测试，则需要更新脚本标记以指示方案（http / s）：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

否则，jQuery将无法加载。

jQuery在小提琴中起作用，但在LIVE时却不行？

3 个答案: