jQuery检查复选框是否未选中无效

时间:2015-11-19 08:28:30

标签: jquery checkbox

我在检查复选框时遇到了一些问题,它总是返回true,没有在false语句中工作,如果没有勾选复选框,我想在点击添加按钮之前停止。如何解决?

这是我的代码:



$('.add').click(function() {
	var weekDays = [];
	$('#checkBox :checked').each(function () {
		weekDays.push($(this).attr('name'));
	});
	
    var row = '<tr>'
			+ '<td class="rowDays">' + weekDays + '</td>'
			+ '</tr>';
	
    if (!$("#days").find("checkbox").is(":checked")) {
   		$(row).insertAfter($('#days > tbody > tr:last'));
	} else{
    	alert('unchecked!')
        return false;
    }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="checkBox">
    <tbody>
	    <tr>
		    <th>Sun</th>
			<th>Mon</th>
			<th>Tue</th>
			<th>Wed</th>
			<th>Thu</th>
			<th>Fri</th>
			<th>Sat</th>
        </tr>
		<tr>
			<td><input name="Sunday" type="checkbox" value="0"></td>
			<td><input name="Monday" type="checkbox" value="1"></td>
			<td><input name="Tuesday" type="checkbox" value="2"></td>
			<td><input name="Wednesday" type="checkbox" value="3"></td>
			<td><input name="Thursday" type="checkbox" value="4"></td>
			<td><input name="Friday" type="checkbox" value="5"></td>
			<td><input name="Saturday" type="checkbox" value="6"></td>
		</tr>
	</tbody>
</table>
            
<button type="button" class="add">Add Days</button>
<br>
<br>
<table id="days">
    <tbody>
		<tr>
			<th>Days</th>
		</tr>
	</tbody>
</table>
&#13;
&#13;
&#13;

JSFiddle

3 个答案:

答案 0 :(得分:2)

<强>已更新

1)将每个输入的公共类(Ex:myCheckbox)设置为:

<input class="myCheckbox" name="Sunday" type="checkbox" value="0">

2)获取具有此类并且已“检查”的所有输入

3)使用'length'属性:

if ($("input[class=myCheckbox]:checked").length > 0) {
    $(row).insertAfter($('#days > tbody > tr:last'));
} else{
    alert('unchecked!')
    return false;
}

答案 1 :(得分:1)

您的情况不正确$("#days").find("checkbox")找不到任何内容(#days没有任何复选框,checkbox不是有效的选择器,用于检索复选框。)< / p>

您只需要检查#checkBox中已选中复选框的长度:

if (! $('#checkBox :checked').length ) {
    return false;
}

这是一个完整的例子:

$('.add').click(function() {

    if (! $('#checkBox :checked').length ) {
        return false;   
    }

    var weekDays = $('#checkBox :checked').map(function() { 
        return this.name;
    }).get();

    var row = '<tr>'
            + '<td class="rowDays">' + weekDays.join(', ') + '</td>'
            + '</tr>';

    $(row).appendTo('#days > tbody');

});

Here's a fiddle

答案 2 :(得分:0)

if ($("#days").find("checkbox").is(":checked").length!=0) {
        $(row).insertAfter($('#days > tbody > tr:last'));
} else{
        alert('unchecked!')
        return false;
}

使用$("#days").find("checkbox").is(":checked").length计算已检查的已检查数量,然后将其与0进行比较。

Fiddle