javascript - Why is my jQuery code not able to read an apostrophe? - Stack Overflow

admin管理员组

文章数量:1316023

I have a web form that automatically checks the checkboxes when the page loads based on the data stored in the MYSQL database. Everything works just fine with the exception of data that contains an apostrophe. Here's my code:

JSON:

 [{"pkFavorietemerken":"1","merken":"Adidas"},{"pkFavorietemerken":"2","merken":"Boss"},{"pkFavorietemerken":"3","merken":"Burberry"},{"pkFavorietemerken":"4","merken":"Christian Dior"},{"pkFavorietemerken":"5","merken":"D&G"},{"pkFavorietemerken":"6","merken":"Diesel"},{"pkFavorietemerken":"7","merken":"Dolce & Gabanna"},{"pkFavorietemerken":"8","merken":"Emporio Armani"}]

JQUERY:

   $.getJSON("jason.php", function(data) {

      $.each(data, function(){


     $("[value='" + this.merken + "']").attr("checked","checked");


       });

   });

HTML:

    <form name="form1" method="post" action="something.php">                        
    <ul>
        <li><input type="checkbox" name="merk[]" value="Adidas"/>Adidas</li>
        <li><input type="checkbox" name="merk[]" value="Airforce"/>Airforce</li>
        <li><input type="checkbox" name="merk[]" value="Armani"/>Armani</li>
        <li><input type="checkbox" name="merk[]" value="Asics"/>Asics</li>
        <li><input type="checkbox" name="merk[]" value="Bikkemberg"/>Bikkemberg</li>
        <li><input type="checkbox" name="merk[]" value="Bjorn Borg"/>Bjorn Borg</li>
        <li><input type="checkbox" name="merk[]" value="BlueBlood"/>BlueBlood</li>
        <li><input type="checkbox" name="merk[]" value="Boss"/>Boss</li>
        <li><input type="checkbox" name="merk[]" value="Brunotti"/>Brunotti</li>
        <li><input type="checkbox" name="merk[]" value="Burberry"/>Burberry</li>
    </ul>

THIS DOESN'T WORK:

    <li><input type="checkbox" name="merk[]" value="Levi's"/>Levi's</li>

I have a web form that automatically checks the checkboxes when the page loads based on the data stored in the MYSQL database. Everything works just fine with the exception of data that contains an apostrophe. Here's my code:

JSON:

 [{"pkFavorietemerken":"1","merken":"Adidas"},{"pkFavorietemerken":"2","merken":"Boss"},{"pkFavorietemerken":"3","merken":"Burberry"},{"pkFavorietemerken":"4","merken":"Christian Dior"},{"pkFavorietemerken":"5","merken":"D&G"},{"pkFavorietemerken":"6","merken":"Diesel"},{"pkFavorietemerken":"7","merken":"Dolce & Gabanna"},{"pkFavorietemerken":"8","merken":"Emporio Armani"}]

JQUERY:

   $.getJSON("jason.php", function(data) {

      $.each(data, function(){


     $("[value='" + this.merken + "']").attr("checked","checked");


       });

   });

HTML:

    <form name="form1" method="post" action="something.php">                        
    <ul>
        <li><input type="checkbox" name="merk[]" value="Adidas"/>Adidas</li>
        <li><input type="checkbox" name="merk[]" value="Airforce"/>Airforce</li>
        <li><input type="checkbox" name="merk[]" value="Armani"/>Armani</li>
        <li><input type="checkbox" name="merk[]" value="Asics"/>Asics</li>
        <li><input type="checkbox" name="merk[]" value="Bikkemberg"/>Bikkemberg</li>
        <li><input type="checkbox" name="merk[]" value="Bjorn Borg"/>Bjorn Borg</li>
        <li><input type="checkbox" name="merk[]" value="BlueBlood"/>BlueBlood</li>
        <li><input type="checkbox" name="merk[]" value="Boss"/>Boss</li>
        <li><input type="checkbox" name="merk[]" value="Brunotti"/>Brunotti</li>
        <li><input type="checkbox" name="merk[]" value="Burberry"/>Burberry</li>
    </ul>

THIS DOESN'T WORK:

    <li><input type="checkbox" name="merk[]" value="Levi's"/>Levi's</li>

• javascript
• jquery
• json
• html-encode
• apostrophe

Share Improve this question Follow edited Apr 9, 2012 at 22:31 Doug Porter 7,90744 gold badges4141 silver badges5656 bronze badges asked Apr 9, 2012 at 22:02 the_boy_zathe_boy_za 28711 gold badge88 silver badges2121 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

For Levi's, the resulting selector ends up being "[value='Levi's']". I guess the selector engine chokes on it. I'm not sure if it supports escaping (Levi\'s) -- if it doesn't, you can do something like

var merken = this.merken;
$("input:checkbox").each(function(){
    if(this.value == merken) this.checked = true;
});

instead.

$("[value='" + this.merken + "']").attr("checked","checked");

When this.merken = "Levi's", the code will resolve to this:

$("[value='Levi's']").attr("checked","checked");

You can't use a single quote inside single quotes. An easy fix should be to change your code to create double-quotes, as long as you won't have a selector named Levi"s :)

$('[value="' + this.merken + '"]').attr("checked","checked");

Well you form a selector by wrapping your value in single quotes. The embedded single quote will cause it to be an invalid selector string.

I think it'll work to make sure embedded single quotes are quoted with a backslash, but I'll have to try it.

edit — try this:

$("[value='" + this.merken.replace(/'/g, "\\'") + "']").attr("checked","checked");

Also, you should (almost certainly) be using .prop() instead of .attr() to set the "checked" property if you're using a newer-than-1.6 jQuery:

$("[value='" + this.merken.replace(/'/g, "\\'") + "']").prop("checked", true);

(No need to set the property to the string "checked", though you can if you like because the browser will just cast it to boolean anyway.)

The right piece of code should be:

$('[value="' + this.merken.replace('"','\"') + '"]').attr("checked","checked");

This accepts single quotes as well as double quotes.

The problem is of the apostrophe, you have to escape it.

Here is a simply way to do so

function addslashes( str ) {
    return (str+'').replace(/([\\"'])/g, "\\$1").replace(/\0/g, "\\0");
}
$("[value='" + addslashes(this.merken) + "']").attr("checked","checked");

本文标签： javascriptWhy is my jQuery code not able to read an apostropheStack Overflow