复选框新状态未反映

时间:2012-11-30 18:58:21

标签: javascript jquery

我在http://jsfiddle.net/7ZpCW/1/

显示了问题

我已经实现了代码,当我点击它旁边的复选框或文本时,应根据其先前的状态选择/取消选中复选框。

问题是当我点击文本时,虽然复选框已被检查但警报消息仅执行了前一个复选框被选中的次数。

当我点击复选框时,会根据当前状态执行警告消息。

Screenshot

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<span id="MYARRAYloader_collapse" class = "w195"  style="display:block">
<div class="sp15">&nbsp;</div>

<div class="lf  fs12 lh15" style="padding-left:10px;">
<input type="checkbox" name="MYARRAY[]" id="MYARRAY0"  value="ALL"  checked  class="chbx checkbox-selector1">
<a href="#" class="checkbox-selector" style="color:#5B5B5B;">All</a> 
<br>
<input type="checkbox" name="MYARRAY[]"  value="V"  class="chbx checkbox-selector1">
<a href="#" class="checkbox-selector" style="color:#5B5B5B;">Opt1</a> 
<span class="gray t11">(42)</span>
<br>
<input type="checkbox" name="MYARRAY[]"  value="N"  class="chbx checkbox-selector1">
<a href="#" class="checkbox-selector" style="color:#5B5B5B;">Opt2</a> 
<span class="gray t11">(38)</span>
<br>
</div>
<div class="sp12">&nbsp;</div>
</span>

<script>
$('.checkbox-selector').click(function() {
var chb = $(this).prev();
chb.click();
return false;
})
$('.checkbox-selector1').click(function() {
var chb , chb1 , action;
chb= $(this); 
clusterName = chb.attr('name');
clusterVal = chb.attr('value');

var array = new Array();


$('input[name="'+clusterName+'"]:checked').each(function(i,el){
alert('Count Me');
chb1 = $(this); 

if(clusterVal == 'ALL')
{
if(chb1.attr('value')!='ALL')
{
chb1.attr("checked","");
}
else
array.push($(el).val());
}
else
{
if(chb1.attr('value')=='ALL')
{
chb1.attr("checked","");
}
else
{
array.push($(el).val());
}
}
});

});
</script>

1 个答案:

答案 0 :(得分:2)

你正在认真地解决这个问题。只需将复选框和文本包装在label

中,即可使文本可单击
<label><input type="checkbox" /> This is some text</label>
<label><input type="checkbox" /> This is some text</label>
<label><input type="checkbox" /> This is some text</label>

jsFiddle:http://jsfiddle.net/7ZpCW/

你应该像这样格式化代码,使其更具语义性。但你不会。因此,您可以通过替换它来修复代码:

$('.checkbox-selector1').click( ... );

用这个:

$('.checkbox-selector1').change( ... );

jsFiddle:http://jsfiddle.net/7ZpCW/2/