2

これが可能かどうかはわかりませんが、おそらくかなり簡単です。

私はフィドルhttp://jsfiddle.net/WTSWP/1/または私がいるような状況を作りました。

複数のラジオ入力があり、それぞれがdiv / liに含まれており、クリックされたときにラジオボタンを選択するための要素が含まれています。

私はjQueryを使用しているので、誰かがjqueryを使用するアイデアを持っているなら、それは大きな感謝です。


私はこれを始めましたが、正しく機能していません。

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



<li class="select-area">

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

</li>


ここに画像の説明を入力してください


ここでフィドル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

jqueryの下位互換性のためにattrを使用します。 

 $(".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バージョンではpropの代わりにattrを使用してください

于 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 に答える