script works on jsfiddle but not in my webpage jquery

问题

With help from @Joseph I have managed to create this script that works exactly the way I want it to on jsfiddle. However, when I use the exact same script on my webpage it does not do anything, it ignores the script inside the if and else and works like a normal radio button would do. I don't get any errror messages and I am using:

http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js 
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js

The only thing that I can think of is that it does not work using "this"? How would I solve that?

My script can be found at:
http://jsfiddle.net/pJgyu/15013/

jQuery(document).ready(function ()
{
    $("input[type='radio']").click(function(){
    var $knapp = $(this).val();      

    if(($knapp=='1c') || ($knapp=='2c')|| ($knapp=='3c')) {
        this.checked = true;  
    }else{
        $("input[type='radio']."+this.className).not($(this)).each(function(){
            this.checked = false;
        });
    }
});
});

<table>   
<tr> 
<td>1</td> 
<td><input type="radio" class="ljudkalla_1" name="ljudkalla_1" value="1a"></td> 
<td><input type="radio" class="ljudkalla_2" name="ljudkalla_1" value="1b"></td> 
<td><input type="radio" class="ljudkalla_3" name="ljudkalla_1" value="1c"></td> 
</tr>
<tr> 
<td>2</td> 
<td><input type="radio" class="ljudkalla_1" name="ljudkalla_2" value="2a"></td> 
<td><input type="radio" class="ljudkalla_2" name="ljudkalla_2" value="2b"></td> 
<td><input type="radio" class="ljudkalla_3" name="ljudkalla_2" value="2c"></td> 
</tr>
<tr> 
<td>3</td> 
<td><input type="radio" class="ljudkalla_1" name="ljudkalla_3" value="3a"></td> 
<td><input type="radio" class="ljudkalla_2" name="ljudkalla_3" value="3b"></td> 
<td><input type="radio" class="ljudkalla_3" name="ljudkalla_3" value="3c"></td> 
</tr>
</table>

回答1:

I think this is what you are after, correct? Does this work on your local machine?

$("input").click(function() {
    if (this.className.indexOf('3') === -1) {
        $("input." + this.className).not($(this)).each(function() {
            this.checked = false;
        });
    }
});

回答2:

You are including jQuery twice. One is the minified version, denoted by the min.js. You only need one of those libraries. I suggest using the minified version to save bandwidth.

回答3:

This seems like an error in your HTML, because it works here locally when creating the HTML from scratch.

You can also try to debug your version with Firebug or the debuggers of Safari or Chrome. Put a breakpoint in your code, and trying out the jQuery selectors manually in the console can help to spot most problems.

This one works:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ()
{
    $("input[type='radio']").click(function(){
    var $knapp = $(this).val();      

    if(($knapp=='1c') || ($knapp=='2c')|| ($knapp=='3c')) {
        this.checked = true;  
    }else{
        $("input[type='radio']."+this.className).not($(this)).each(function(){
            this.checked = false;
        });
    }
});
});

</script>
</head>

<body>

<table>   
<tr> 
<td>1</td> 
<td><input type="radio" class="ljudkalla_1" name="ljudkalla_1" value="1a"></td> 
<td><input type="radio" class="ljudkalla_2" name="ljudkalla_1" value="1b"></td> 
<td><input type="radio" class="ljudkalla_3" name="ljudkalla_1" value="1c"></td> 
</tr>
<tr> 
<td>2</td> 
<td><input type="radio" class="ljudkalla_1" name="ljudkalla_2" value="2a"></td> 
<td><input type="radio" class="ljudkalla_2" name="ljudkalla_2" value="2b"></td> 
<td><input type="radio" class="ljudkalla_3" name="ljudkalla_2" value="2c"></td> 
</tr>
<tr> 
<td>3</td> 
<td><input type="radio" class="ljudkalla_1" name="ljudkalla_3" value="3a"></td> 
<td><input type="radio" class="ljudkalla_2" name="ljudkalla_3" value="3b"></td> 
<td><input type="radio" class="ljudkalla_3" name="ljudkalla_3" value="3c"></td> 
</tr>
</table>

</body>
</html>

来源：https://stackoverflow.com/questions/7075461/script-works-on-jsfiddle-but-not-in-my-webpage-jquery

标签

javascript

jquery

this

jsfiddle