unable to use the toChecklist Plugin_问答_开发者

开发者 https://www.devze.com 2023-03-10 06:49 出处：网络

has anybody used the toChecklist jquery plugin, i am trying to use it and followed the instructions, but nothing happen at all, here is my code:

相关专题：jquery xhtml

has anybody used the toChecklist jquery plugin, i am trying to use it and followed the instructions, but nothing happen at all, here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.开发者_运维百科org/1999/xhtml">
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery.toChecklist.min.js"></script>

<!-- Stylesheet -->
<link type="text/css" rel="stylesheet" media="screen" href="jquery.toChecklist.min.css" />

<!-- Code to run toChecklist -->
<script type="text/javascript">
    $(function() {
        $('mySelectBox').toChecklist();
    });
</script>

</head>
<body>

<select id="mySelectBox" multiple="multiple">
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
</select>   

</body>
</html>

toChecklist plugin uses two old and obsolete ways to access innerHTML, for examples :

var labelText = $(this).attr('innerHTML'); 
checkboxValue = this.innerHTML;

which is not available in jquery 1.6+

So you have 2 choices to make it work for you.

Downgrade your jquery to version 1.5 or less.
Change those lines (and other lines like this) in toChecklist.js to something like these
```
var labelText = $(this).html(); 
checkboxValue = this.html();
```

Please see http://forum.jquery.com/topic/jquery-change-innerhtml for more details.

Well, the issue is that you have two <html> tags:

<html xmlns="http://www.w3.org/1999/xhtml">
<html>

This will prevent your page from validating, and possibly cause some other issues as well. Remove the second <html> tag if you're planning to stick with XHTML (which I'm guessing you are).

Ok, the problem you're facing can be fixed quite easily, and exists here:

<script type="text/javascript">
    $(function() {
        $('mySelectBox').toChecklist();
    });
</script>

I think this is causing a problem as the browser may not have fully loaded the DOM prior to executing the code, thus jQuery cannot perform actions on something that doesn't exist in the DOM.

Change it to the following and everything will work fine:

<script type="text/javascript">
    $(document).ready(function () {
        $('#mySelectBox').toChecklist();
    });
</script>

The .ready() method waits for the DOM the load fully before executing. Also, you need to prefix any element Id's with a hash ("#") to indicate to jQuery that they are Ids and not some other type of identifier (such as classes, etc).

I realise that its been a few days since you asked the question, but hopefully this will provide some assistance.