CODEWITHSUNDEEP
javascriptjquerythisjsfiddle
user626342
user626342

Reputation: 147

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>

Upvotes: 0

Views: 1210

Answers (3)

GregL
GregL

Reputation: 38103

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;
        });
    }
});

Upvotes: 0

Daan
Daan

Reputation: 10304

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>

Upvotes: 1

andyb
andyb

Reputation: 43823

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.

Upvotes: 1

Related Questions