javascript checkbox checkd but not updating UI

Question

I wrote a script to check checkbox when I am clicking on it's respective image. Image have id like checkbox-img-1 and checkbox input have id like checkbox-1 for 1st pair of checkbox and image. For 2nd pair id's are checkbox-img-2 and checkbox-2 and so on. So, whenever I click on image I want to check the respective checkbox. For few images the UI is getting updated but for few images it's not getting updated. What is the possible problem? I searched a bit but all questions were doing mistake of having attr in place of prop. My script is in pure javascript. I tried with jQuery but I am getting same bug. I figured out that content which is not present or not yet displayed in front are not getting selected. The javascript code is:

/* Check option on image click */
        $(".option-check-img").click(function () {
            var checkbox_img_id = $(this).attr("id");
            var checkbox_id     = checkbox_img_id.replace("checkbox-img", "checkbox");
            if(document.getElementById(checkbox_id).checked)
            {
                document.getElementById(checkbox_id).checked = false;
                var d = document.getElementById(checkbox_img_id);
                d.className = "img-circle pointer";
                /*$("#checkbox_id").prop("checked", false);
                $("#checkbox_img_id").removeClass("img-border");
                console.log(document.getElementById(checkbox_id));*/
            }
            else
            {
                document.getElementById(checkbox_id).checked = true;
                var d = document.getElementById(checkbox_img_id);
                d.className += " img-border";
                /*$("#checkbox_id").prop("checked", true);
                $("#checkbox_img_id").addClass("img-border");
                console.log(document.getElementById(checkbox_id));*/
            }
        });

Any solution? Thank you.

Hi, The code in html+php(magento). Checkboxes are retrieved from db. That will not work on fiddle. — Swapnil Bhikule
– Swapnil Bhikule, Commented Apr 4, 2016 at 11:31
@SwapnilBhikule, can you take the generated html from the browser and create a fiddle with that. — Anbarasan
– Anbarasan, Commented Apr 4, 2016 at 11:42
@Anbarasan I put it on my development site troopr.in. In home page below we have form hashtag/magic search. In that magic search is not updating UI. — Swapnil Bhikule
– Swapnil Bhikule, Commented Apr 4, 2016 at 11:52

Community · Accepted Answer · 2017-05-23 12:31:33Z

0

Try to use prop() instead of attr()

JQuery Script not checking check-boxes correctly

Read docs for more info jQuery prop().

edited May 23, 2017 at 12:31

CommunityBot

11 silver badge

answered Apr 4, 2016 at 11:28

light_ray

6442 gold badges14 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Swapnil Bhikule Over a year ago

Hi, in my commented code I am using prop. But it is not working too! I was searching for an answer, all were doing same mistake of using attr but in my case that's not the problem.

Anbarasan Over a year ago

The OP has already mentioned that he has used .prop instead of .attr with jquery you can see the commented out code.

3rdthemagical · Accepted Answer · 2016-04-04 11:40:38Z

0

Are you sure you want to use js for this? You can do this just with css.

*, *:before,  *:after {
  font-family: sans-serif;
  box-sizing: border-box;
}

label {
  display: block;
  margin-bottom: 20px;
  cursor: pointer;
}

span:before {
  content: '';
  
  display: inline-block; 
  width: 15px;
  height: 15px;
  margin-right: 10px;
  
  background: white; /* you can place your image url here */
  border: 4px solid white;
  border-radius: 3px;
  box-shadow: 0 0 0 1px black; 
}

input {
  display: none;
}

input:checked + span:before {
  background: black;
}

<label>
  <input type="checkbox">
  <span>Checkbox 1</span>
</label>
<label>
  <input type="checkbox">
  <span>Checkbox 2</span>
</label>

answered Apr 4, 2016 at 11:40

3rdthemagical

5,36820 silver badges36 bronze badges

Comments

Toonijn · Accepted Answer · 2016-04-04 11:40:42Z

0

There is a pure-html solution (Fiddle):

<ul><li>
  <input type="checkbox" id="checkbox-1" />
  <label for="checkbox-1"><img /></label>
</li>
<li>
  <input type="checkbox" id="checkbox-2" />
  <label for="checkbox-2"><img /></label>
</li></ul>

if you need to add styling to your images when checkbox is checked you can use css3 (Fiddle):

input:checked + label img{
  border: 1px solid black;
}

input:not(:checked) + label img{
  border: 1px solid green;
}

// If you want to hide the checkbox
input[type=checkbox] {
  display: none;
}

You should build your html such the checkbox and the image are next to each other.

This approach is much more elegant and doesn't use unnecessary javascript.

answered Apr 4, 2016 at 11:40

Toonijn

3942 silver badges10 bronze badges

1 Comment

Swapnil Bhikule Over a year ago

Hi, thank you for the answer. But I am using js because my checkboxes are in slider and I am using lot of css for structure. With CSS it might get more complex.

Manish Kumar · Accepted Answer · 2016-04-04 12:08:57Z

0

            $(".option-check-img").click(function() {
            var $this = $(this);
            var checkbox_img_id = $(this).attr("id");
            var checkbox_id = checkbox_img_id.replace("checkbox-img", "checkbox");
            if ($("#" + checkbox_id + ":checked").length) {
                $("#" + checkbox_id).prop('checked', false);
                $("#" + checkbox_img_id).removeClass("img-border");
                $("#" + checkbox_img_id).addClass("img-circle pointer");
            } else {
                $("#" + checkbox_id).prop('checked', true);
                $("#" + checkbox_img_id).removeClass("img-circle pointer");
                $("#" + checkbox_img_id).addClass("img-border");
            }
        });

Converted your code to proper jQuery Code.

Assumption: ID is of your check-box element.

Make sure no elements have same ID in your DOM.

Updated code to remove alternate-classes too.

Thanks

edited Apr 4, 2016 at 12:08

answered Apr 4, 2016 at 11:33

Manish Kumar

1,17616 silver badges29 bronze badges

7 Comments

Swapnil Bhikule Over a year ago

Hi, thanks for the answer. But it's not working too. Few checkboxes are getting selected, and few fixed checkboxes are not getting clicked.

Manish Kumar Over a year ago

what is mean by 'fixed check-boxes', here ?? Better you create jsFiddle of your scenario.

Swapnil Bhikule Over a year ago

If I have checboxes with ids checkbox-1, checkbox-2, checkbox-3 and checkbox-4. Then previously before posting question checkbox-3 was not updating the UI. And now with your answer checkbox-3 is not updating UI.

Manish Kumar Over a year ago

Problem can be with your CSS, if you have written css rules in combination with IDs. May be you missed out to updated your css for IDs like 'checkbox-3' and rest others.

Swapnil Bhikule Over a year ago

I am using IDs just for javascript or jquery and all css properties are defined by classes.

|

Anbarasan · Accepted Answer · 2016-04-04 12:58:05Z

0

your checkbox id's are not unique.

A different checkbox with the same id is getting checked / unchecked instead of the one you want to manupulate. getElementById / $('#id') will return only one element which ever it finds first.

for instance, in the link that you shared the option Party has a id of checkbox-24 but with the same id there are total of three checkboxes.

similarly for Music with a id of checkbox-27 there are again 3 instances of checkbox with that id.

Your script is correct, but the ids are not unique. Make the id's unique or use someother identifier or combination of identifiers to uniquely identify the checkbox which you want to manipulate.

answered Apr 4, 2016 at 12:58

Anbarasan

1,21714 silver badges20 bronze badges

1 Comment

Swapnil Bhikule Over a year ago

Hi, yeah, I got the same thing with developer tool, but when I open page source by right clicking and then selecting view page source then I am getting only single checkbox-24.

Swapnil Bhikule · Accepted Answer · 2016-04-04 13:35:42Z

0

the problem was with infinite loop. Without infinite loop its working. But still I want that infinite slider so I will try something different.

answered Apr 4, 2016 at 13:35

Swapnil Bhikule

6062 gold badges8 silver badges25 bronze badges

Collectives™ on Stack Overflow

javascript checkbox checkd but not updating UI

6 Answers 6

2 Comments

Comments

1 Comment

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

1 Comment

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related