I am working on a script for setting checkboxes according to values stored in an array (part of a larger script for allowing the user to revert a form to its initial values). The code is basically this:
$("#myForm :checkbox[name='myName[]']").each(function(){
if($.inArray($(this).val(),initValues)!=-1){
$(this).prop("checked",true);
} else {
$(this).prop("checked",false);
}
});
initValues contains the value attributes of the boxes that were initially checked.
The script checks the first element in $("#myForm :checkbox[name='myName[]']") but subsequent elements all appear to be unchecked. Firebug shows that the checked attribute is being changed but the box itself is unchecked.
I have tried verious permutations of attr() in place of prop() all with the same results, and the script behaves the same way in Firefox 11.0 and Chrome 18.0 on OS X.
I am working on a script for setting checkboxes according to values stored in an array (part of a larger script for allowing the user to revert a form to its initial values). The code is basically this:
$("#myForm :checkbox[name='myName[]']").each(function(){
if($.inArray($(this).val(),initValues)!=-1){
$(this).prop("checked",true);
} else {
$(this).prop("checked",false);
}
});
initValues contains the value attributes of the boxes that were initially checked.
The script checks the first element in $("#myForm :checkbox[name='myName[]']") but subsequent elements all appear to be unchecked. Firebug shows that the checked attribute is being changed but the box itself is unchecked.
I have tried verious permutations of attr() in place of prop() all with the same results, and the script behaves the same way in Firefox 11.0 and Chrome 18.0 on OS X.
-
1
Provide some HTML, please. It's possible that
.val()isn't returning the values you expect. – Blazemonger Commented Apr 19, 2012 at 20:13 -
.prop()is correct. Your code works fine here. Are you using a recent version of jQuery? – Blazemonger Commented Apr 19, 2012 at 20:16 -
I did consider that but as far as I can tell, it is, and the
$.inArray()test is working as it should. The HTML is part of an enormous project so a bit plex to display here but I will try and work up a test case. Thanks – toppy Commented Apr 19, 2012 at 20:20 - I am using jQuery v1.7.2 – toppy Commented Apr 19, 2012 at 20:21
- Your example works for me too, as does this which is closer to how the script is actually implemented. I'm totally stumped. There is a lot of other stuff going on e.g. the form is one of several forms on the page, they are enclosed in a jQuery UI Tabs etc. I can only guess there is a weird conflict somewhere. Thanks for your help. – toppy Commented Apr 19, 2012 at 21:03
3 Answers
Reset to default 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var initValues = ['eee', 'mec', 'csc'];
$('#btnResetCheckBox').click(function () {
$('#myForm').find(':checkbox[name^="myName"]').each(function () {
$(this).prop("checked", ($.inArray($(this).val(), initValues) != -1));
});
//Or
// $('#myForm').find(':checkbox[name^="myName"]').prop('checked', false);
// $.each(initValues, function (i, val) {
// $('#myForm').find(':checkbox[name^="myName"][value="' + val + '"]').prop("checked", true);
// });
});
$('#btnResetCheckBox').trigger('click');
});
</script>
</head>
<body>
<form id="myForm" action="">
<div>
<input type="checkbox" name="myName[1]" value="eee" />eee<br />
<input type="checkbox" name="myName[2]" value="ece" />ese<br />
<input type="checkbox" name="myName[3]" value="it" />it<br />
<input type="checkbox" name="myName[4]" value="csc" />csc<br />
<input type="checkbox" name="myName[5]" value="mec" />mec<br />
</div>
<input type="button" id="btnResetCheckBox" value="Reset Check Box" />
</form>
</body>
</html>
There is another way. If you give each of your checkboxes the same class, you can actually just pass an array into .val for the class.
jQuery(".nameInput").val(initValues);
It's simple, elegant, and works
html attributes can be messup if not set as string.
I suggest replacing:
$(this).prop("checked",true);
by
$(this).prop("checked","checked");
or
$(this).prop("checked",false);
by
$(this).prop("checked","");