Mehrer Checkboxen in Beitrag per Cookie speichern

Joschi1711

Hallo Leute,
Ich habe auf meiner HP mehrere Checklisten mit eingebauten Checkboxen, sprich die abgearbeiteten Punkte können via Häckchen markiert werden.
nun mein Problem:
wie kann ich das ganze via Cookie für den jeweiligen User speichern lassen?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Joschi1711

Hallo Leute,
eine Lösung habe ich inzwischen gefunden, allerdings mit einem Script , welches leider in einem Wordpress Beitrag nicht läuft, ich habe das ganze schon mit dem leider veraltetem inline-script plugin versucht, was leider bei der aktuellen Version von WP nicht wirklich funktioniert, mir zerschießt es jedes mal die Formatierung.
Ist es möglich andere Javascripts in WP zum laufen zu bewegen?
dieses Script wird in mehreren Beiträgen zum Einsatz kommen.
Ich habe schon einiges gelesen mit Script in die Header.php des Themes einfügen, jedoch ist in meiner Header.php nicht von eingefügten Scripts zu sehen.
Ich verwende das Theme Tempera.

Hier mal die reine html der besagten Seite, welche außerhalb von WP wunderbar funktioniert.
Unter Verwendung von Cookies werden die Checkboxen beim User gespeichert.

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Checkliste1</title>
<style>
button{
margin-top:8px;
}
</style>
</head>
 
<body>


<h2 style="text-align: left;">Einkaufsliste - Beruf Kochen 0-400</h2>
<p style="text-align: left;">Beim Kaufmann</p>
<p>
  <input type="checkbox" id="1">
<img class="alignnone size-full wp-image-1869" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Beutel_Mehl_Icon.png" alt="20px-Beutel_Mehl_Icon" width="20" height="20" />150x Beutel Mehl</p>
<p>
<input type="checkbox" id="2"><img class="alignnone size-full wp-image-1924" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Krug_Wasser_Icon.png" alt="20px-Krug_Wasser_Icon" width="20" height="20" />125x Krug Wasser</p>
<p>
<input type="checkbox" id="3"><img class="alignnone size-full wp-image-1945" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Paket_Salz_Icon.png" alt="20px-Paket_Salz_Icon" width="20" height="20" />100x Paket Salz</p>
<p>
<input type="checkbox" id="4"><img class="alignnone size-full wp-image-1884" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Flasche_Essig_Icon.png" alt="20px-Flasche_Essig_Icon" width="20" height="20" />25x Flasche Essig</p>
<p>
<input type="checkbox" id="5"><img class="alignnone size-full wp-image-1923" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Krug_Pflanzenl_Icon.png" alt="20px-Krug_Pflanzenl_Icon" width="20" height="20" />25x Krug Pflanzenöl</p>
<p>
<input type="checkbox" id="6"><img class="alignnone size-full wp-image-1957" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Sack_Zucker_Icon.png" alt="20px-Sack_Zucker_Icon" width="20" height="20" />25x Sack Zucker</p>
<p>
<input type="checkbox" id="7"><img class="alignnone size-full wp-image-1890" src="http://saxonia-devils.de/wp-content/uploads/2014/08/20px-Glas_Buttermilch_Icon.png" alt="20px-Glas_Buttermilch_Icon" width="20" height="20" />25x Glas Buttermilch</p>
<p>
//............ Hier würde es weiter gehen//
 </p>
<button>Markieren</button>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
 
<script>
function handleButtonClick(button){
if ($(button).text().match("alle markieren")){
$(":checkbox").prop("checked", true)
} else {
$(":checkbox").prop("checked", false)
};
updateButtonStatus();
}
 
function updateButtonStatus(){
var allChecked = $(":checkbox").length === $(":checkbox:checked").length;
$("button").text(allChecked? "Markierung entfernen" : "alle markieren");
}
 
function updateCookie(){
var elementValues = {};
$(":checkbox").each(function(){
elementValues[this.id] = this.checked;
});
 
elementValues["buttonText"] = $("button").text();
$.cookie('elementValues', elementValues, { expires: 7, path: '/' })
}
 
function repopulateFormELements(){
var elementValues = $.cookie('elementValues');
if(elementValues){
Object.keys(elementValues).forEach(function(element) {
var checked = elementValues[element];
$("#" + element).prop('checked', checked);
});
 
$("button").text(elementValues["buttonText"])
}
}
 
$(":checkbox").on("change", function(){
updateButtonStatus();
updateCookie();
});
 
$("button").on("click", function() {
handleButtonClick(this);
updateCookie();
});
 
$.cookie.json = true;
repopulateFormELements();
</script>
</body>
</html>

Alles anzeigen

pixselig

Hallo
Suche mal im Codex nach wp_enqueue_script. OK hier http://codex.wordpress.org/Function_Refer…_enqueue_script
LG

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Mehrer Checkboxen in Beitrag per Cookie speichern

Jetzt mitmachen!