复选框新状态未反映

问题描述 投票:0回答:1

我在http://jsfiddle.net/7ZpCW/1/上展示了这个问题

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

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

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

<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>
javascript jquery
1个回答
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/

© www.soinside.com 2019 - 2024. All rights reserved.