script works on jsfiddle but not in my webpage jquery_问答_开发者

script works on jsfiddle but not in my webpage jquery

开发者 https://www.devze.com 2023-03-28 14:26 出处：网络

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">&开发者_Python百科lt;/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>

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.

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>

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