Question

我有这段代码：

<table border="1" style="margin:0 auto;">
    <tr>
        <td class="pointer" style="padding: 2px;"><input style="margin-left: 2px;" type="checkbox" name="nuovoCheck" id="newCheckId" value="N" /></td>
        <td id="textCheckNuovo" class="pointer" onClick="return selectNew();"><b>New</b></td>
    </tr>
</table>

使用相关脚本：

function selectNew() {
    if ($('#newCheckId').prop('checked') == false) {
        $('#newCheckId').attr('checked', true)
    }
    else {
        $('#newCheckId').attr('checked', false)
    }
}

我不知道为什么这项工作只进行了一次：

我点击并选中了复选框
我点击了另一次，取消选中了复选框。
但如果第三次点击没有任何反应。

我不明白。

我想要这样：如果单击复选框附近的文本，则必须选中复选框

Answer 1

尝试

function selectNew() {
            if ($('#newCheckId').prop('checked') == false) {
                $('#newCheckId').prop('checked', true)
            }
            else {
                $('#newCheckId').prop('checked', false)
            }
        }

Answer 2

如果您可以处理HTML5兼容性，“label”标记会处理此问题，将文本语义联系起来（IE理解为实际上将其链接为复选框的标签），并且无需javascript（适用于符合HTML5标准的浏览器

E.g。

<table border="1" style="margin:0 auto;">
    <tr>
        <td class="pointer" style="padding: 2px;"><input style="margin-left: 2px;" type="checkbox" name="nuovoCheck" id="newCheckId" value="N" /></td>
        <td id="textCheckNuovo" class="pointer"><label for="newCheckId">New</label></td>
    </tr>
</table>

请参阅此JS小提琴（不使用javascript）以获取示例：http://jsfiddle.net/RKuhT/

Answer 3

试试这个：

    if ($('#newCheckId').prop('checked') == false) {
        $('#newCheckId').prop('checked', true)
        $('#newCheckId').attr('checked', true)
    }
    else {
        $('#newCheckId').removeAttr('checked')
    }

具有复选框属性更改属性的奇怪行为

3 个答案: