2

I'm not sure if this possible but probably is fairly simple.

I've made a fiddle http://jsfiddle.net/WTSWP/1/ or the kind of situation I'm in.

I've got multiple radio inputs, each contained by a div/li, and what the containing element to select the radio button when clicked.

I'm using jQuery to so if anyone has ideas using jquery that would be great thanks.


I started this but isn't working right.

$(".select-area").click(function() {
    $(this).find('input').trigger('click');
});



<li class="select-area">

     <input type="radio" name="colour" value="black">

</li>


enter image description here


Fiddle here http://jsfiddle.net/WTSWP/1/

4

4 回答 4

4

尝试：

$(".select-area").click(function() {
    $(this).find('input:radio').prop('checked', true);
});

jsFiddle 演示

于 2012-06-25T22:50:00.407 回答
1

使用 attr 实现 jquery 向后兼容性。 

 $(".select-area").click(function() {
        $(this).find('input').attr('checked',true);
    });

应该这样做：http: //jsfiddle.net/epinapala/WTSWP/5/

于 2012-06-25T22:53:33.807 回答
0 
$(".select-area").click(function() {
    $(this).find('input').prop('checked',!$(this).find('input').prop('checked'));
});

对于 1.6.1 之前的 jQ 版本，使用 attr 而不是 prop

于 2012-06-25T22:52:30.477 回答
0

请看这个：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>jQuery - Is it possible to add more than one image to a table cell</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(':radio').change(function(e){
                alert($(this).attr('id'));
            });

            $(".select-area").click(function(e) {
                //$(this).find('input').trigger('click');
                $(this).children('input[type=radio]').trigger('click');
            });

        });
    </script>
    <style type="text/css">
        .select-wrapper {
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            position: absolute;
            overflow: visible;
        }

        .select-area {
            width: 200px;
            height: 200px;
            background: black url('http://www.flikie.com/wp-content/uploads/2011/03/Patterns_20110304_Flower-pattern.jpg');
            background-size: auto 100%;
            left: -50%;
            top: -50%;
            position: relative;
            cursor: pointer;
        }

        input {
            margin: 95px 0 0 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<form>

    <ul class="select-wrapper">

        <li class="select-area">

            <input type="radio" id="radio1" name="colour" value="black">

        </li>

    </ul>

    <input type="radio" name="colour" id="radio2" value="">

</form>
</body>
</html>
于 2012-06-25T23:07:32.517 回答