adding Reset button to reset checkboxes using PHP or javascript - php

Question

I need assistance in figure out the method to provide a button to reset these checkboxes.
UPDATEL: I have more information to share:
The answers provided will only work with checkboxes that are selected with that instance and not checkboxes that are enabled onLoad. This is a perferences page were people can choose genre's they like and save them.
<div class="grid_13">
<form method="post" id="updatePreferedGenres" action="/account/update/preferences/genres">
<h2 class="alt blue no-margin-top margin-bottom">Check off genres you like:</h2>
<?php
$this->load->library('GenreLib');
$genreArray = $this->genrelib->getGenreList();
foreach ($genreArray as $parentID => $genreSegment){
$isChecked = "";
if (isset($customerPrefs['genres']) && is_array($customerPrefs['genres']) && sizeof($customerPrefs['genres']) > 0 && in_array($parentID, array_keys($customerPrefs['genres']))) {
$isChecked = "CHECKED";
}
echo '<p class="grid_3 no-margins-left no-margins-right"><input type="checkbox" class="margin-right" name="' . $genreSegment['parentGenreName'] . '" value="' . $parentID . '"' . $isChecked . '/>' . $genreSegment['parentGenreName'] . '</p>';
}
?>
<div class="clear"></div>
<input type="button" class="button right" value="Save" />
<div class="clear"></div>
</form>
// Rig the preferences form
$("#updateDHOverride").submit(function(event) {
event.preventDefault();
if ( $(this).find("#downloadHubOverride").is(':checked')){
document.cookie = 'downloadHubOverride=TRUE; expires=Thursday, 25-Jul-2030 23:59:59 GMT; path=/';
}
else {
document.cookie = 'downloadHubOverride=FALSE; expires=Thursday, 25-Jul-2030 23:59:59 GMT; path=/';
}
});
// Rig the submit for genre preferences form
$("#updatePreferedGenres").each(function() {
var linkedForm = $(this);
$(this).find("#prefSave").click( function(event) {
event.preventDefault();
var getGenreIds = "";
linkedForm.find("input[type=checkbox]").each( function() {
if ( $(this).is(":checked") ) {
if ( getGenreIds.length > 0) {
getGenreIds += ',' + $(this).attr('value');
}
else {
getGenreIds += $(this).attr('value');
}
}
});
$.post(
linkedForm.attr('action'),
{ genreIds : getGenreIds },
function (status) {
status = $.parseJSON(status);
if ( status.status == "success" ) {
$.prompt('<h4>Preferences updated successfully!</h4>', {
top: '34%',
zIndex: '10000'
});
if ( linkedForm.hasClass('goHome') ) window.location = "/";
}
else {
$.prompt('<h4>' + status.message + '</h4>', {
top: '34%',
zIndex: '10000'
});
}
}
);
});
});
// REMOVE checkboxes Script - need to place into onClick Function
// $('input:checkbox').removeAttr('checked');
$('#activateAccount').submit( function(event) {
event.preventDefault();
// update form update action
$.post(
$(this).attr('action'),
$(this).serialize(),
function (status) {
//console.log(status);
status = $.parseJSON(status);
if ( status.status == "success" ) {
$.prompt('<h4>Account updated successfully!</h4>', {
top: '34%',
zIndex: '10000',
buttons: { OK:true },
submit: function(v,m,f){
location.reload(true);
}
});
}
else {
if ( status.data != "" ) {
//if there are form validation errors
displayValidation(status.data);
}
else {
//generic error message
$.prompt('<h4>' + status.message + '</h4>', {
top: '34%',
zIndex: '10000'
});
}
}
}
);
});
I have a basic Idea of what needs to happen, I'm just not sure on the syntax.

Answer 1

since you seem to only have checkboxes :
<input type='reset' value='resetButton'>

Answer 2

No need for PHP, nor Javascript:
<input type="reset" value="Reset checkboxes" />