我在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"> </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"> </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>
你是在认真地解决这个问题。只需将复选框和文本包装在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/