I am having a bit of a tough time with this one.
//First I want to check boxes. When I press Hide Unchecked the id's of the checked boxes are saved as an array. After the page is refreshed I want to retrieve the array and use it to recheck boxes that were checked and to automatically hide boxes that remain unchecked.
//I was thinking to store and retrieve it checked id's array as a property in a SharePoint library. But once I retrieve the property I am having trouble setting up the code to check the boxes from the array and hide boxes that remain unchecked.
Below is my efforts to use an array to check boxes and then hide those boxes that are not checked. Not happening. I appreciate any comments very much. -dave
<!doctype html>
<html>
<head><script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
$(document).ready(function(){
$("#button1").click(function(){
//SP Services to retrieve stored array and recheck boxes...
var myArray="3";//this will be the array history stored in property
//var myArray=["love","foo"] //CANT GET THIS TO WORK
var myVar = $("input:checkbox").not(":checked")
alert(myVar);
$( myVar).each( function(){
if ($(this).val().indexOf(myArray)!=-1){
//if((myArray).indexOf($(this).val())!=-1){
$(this).attr('checked', true);
var myVarHide = $("input:checkbox").not(":checked").parent().parent();
$(myVarHide).hide();
var arr = []; $("input:checkbox:checked").each(function(){
arr.push($(this).val());
});
alert(arr);//SHOULD TRY LOCALSTORAGE
return false;
});
}
});
});
$("#button2").click(function(){
var myVarShow = $("input:checkbox").not(":checked").parent().parent();
$(myVarShow).show();
});
});
</script>;
</head>
<body>
<input name="button1" type="button" id="button1" value="Hide Unchecked and Make Array">
<input type="button" name="button2" id="button2" value="Show Unchecked">
<p> </p>
<p> </p>
<p> </p>
<form>
<table width="200" border="1">
<tr>
<th scope="col"><input name="name" type="checkbox" id="a" title="title" value="valueFOO" checked></th>
<th scope="col"> </th>
<th scope="col">love</th>
</tr>
<tr>
<td><input type="checkbox" id="b" value="2"></td>
<td> </td>
<td>hate</td>
</tr>
<tr>
<td><input type="checkbox" id="c" value="3"></td>
<td> </td>
<td>foo</td>
</tr>
</table>
<!--THIS BLOWS UP THE CODE if enabled. I THINK ITS A JQUERY BUG?<input name="checkbox" type="checkbox" id="hiddenCheckbox" style="Display:None"; value="hiddenCheckbox">-->
</body>
</html>