Checkboxes not checking correctly – Javascript

تبليغ
سؤال

يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.

تبليغ
‎إلغاء

Good Day everyone, currently I have an issues fetching the state/rendering checkboxes to be check properly. The main objective of this is to set the selected radio button to checked, so it will be checked even after refreshing. The key value pairs that are set are unique.

I have multiple item cards which holds 2 checkboxes each “Partial Download” (checked by default) and “Partial + Full Download”. Whenever the function is rendered to get the key value pair from the local storage, for some reason it only affects the first item card. Even when the key value pair for the first item card is not stored, the first item card will be checked to “Partial + Full Download”.

Please do take a look at my code.. I have no idea what is wrong. Do let me know thank you

Here is the HTML code:

<form class=”g-item-title” style=”color: #005e95″>
<input type=”radio” id=”checkboxPartialDownload” data-dojo-attach-event=”onClick: _test” style=”cursor: pointer;” name=”downloadValue” value=”partialDownload” checked>
Allow Partial Download
<br>
<input type=”radio” id=”checkboxFullDownload” data-dojo-attach-event=”onClick: _onclickTest” style=”cursor: pointer;” name=”downloadValue” value=”fullDownload” >
Allow Partial + Full Download
</form>

The on click function to save the key value pair in local storage:

_onclickTest: function(evt){
let title = this.item.title;
let fileid = this.item.fileid
localStorage.setItem(`${title}`,’FullDownload’)
console.log(`${title}, ${fileid} HERE`)
}

The code that is being rendered when the page is loaded:
(The first checkbox is being checked from here.. even though the local storage does not the key value pair for it)

_renderDownloads: function(item){

let title = this.item.title;
let fileid = this.item.fileid

console.log(“Rendering first load”)

if(localStorage.getItem(title)=== “FullDownload”){
console.log(`Item is here for ${title}`) // The item that matches the if condition console logs here. The first item card does not meet the condition but the card is still checked..
$(‘#checkboxPartialDownload’).prop(‘checked’, false);
$(‘#checkboxFullDownload’).prop(‘checked’, true);
}
}

‫أضف إجابة

تصفح
تصفح

مجهول يجيب