3

このチェックボックスがある要素スパンをクリックすると、項目チェックボックスを設定する必要があります。

コード：

<script>
$('.CheckMemberClassList').bind('click',function(){
    $('.CheckMemberClassList').removeClass('MemberClassActive').addClass('MemberClassInactive');
    $(this).removeClass('MemberClassInactive').addClass('MemberClassActive');
    });
</script>


<span class="MemberClass1 MemberClassActive CheckMemberClassList">
<input type="radio" name="MemberClassList" id="MemberClassList1" value="1" checked="checked">
Text One
</span>

<span class="MemberClass2 MemberClassInactive CheckMemberClassList">
<input type="radio" name="MemberClassList" id="MemberClassList2" value="2">
Text Two
</span>

<span class="MemberClass3 MemberClassInactive CheckMemberClassList">
<input type="radio" name="MemberClassList" id="MemberClassList3" value="3">
Text Tree
</span>

このコードでどのように作成する必要があるか教えてください。

4

3 に答える 3

8

change your <span>s to <label> with a for= attribute matching the ID of your input, like so:

<label for="checkbox1">Click Me!</label>
<input type="checkbox" id="checkbox1">

http://jsfiddle.net/2GbPS/

Actually, since you have your checkbox inside the span, this will work:

<label>
<input type="checkbox">
Click Me!
</label>

(fiddle updated)

Works with radios too!

<label>
<input type="radio">
Click Me!
</label>
于 2012-10-12T00:20:49.543 に答える
2 
$('.CheckMemberClassList').bind('click',function(){
    $('.CheckMemberClassList').removeClass('MemberClassActive').addClass('MemberClassInactive');
    $(this).removeClass('MemberClassInactive').addClass('MemberClassActive');
    $(this).find('input:radio').prop('checked', true);
});

実例：http：//jsfiddle.net/hMYtg/

Jquery .prop（）ドキュメント：http ：//api.jquery.com/prop/

于 2012-10-12T00:19:41.493 に答える
0

First of all, do you want a checkbox or a radio input? Your code is a radio input.

Here is a jsfiddle showing what you require

You need the following javascript:

$('span').click(
    function() {
        var cb = $(this).find(":radio")[0];

        if (!$(cb).attr("checked")) {
            $(cb).attr("checked", "checked");
        } else {
            $(cb).removeAttr("checked");
        }
    }
);

$('span input').click(
    function(event){
        event.stopPropagation();
});​
于 2012-10-12T00:21:03.780 に答える