当我单击具有此复选框的元素跨度时，如何设置项目复选框？答案

【问题标题】：How set item checkbox when i click on element span which have this checkbox?当我单击具有此复选框的元素跨度时，如何设置项目复选框？
【发布时间】：2012-10-02 18:17:15
【问题描述】：

当我单击具有此复选框的元素跨度时，我需要设置项目复选框。

代码：

<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>

请告诉我我需要如何在这段代码中制作它？

【问题讨论】：

我认为您可能需要使用<label for="formElementID">...</label> 标签而不是<span>...</span>。这将使与您的单选按钮关联的文本可点击，就像点击了相应的单选按钮一样。 Label tag。如果我是对的，那么不需要 javascript。
没问题。我忘了搜索）

标签： jquery checkbox

【解决方案1】：

将您的 <span>s 更改为 <label>，并使用与您的输入 ID 匹配的 for= 属性，如下所示：

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

http://jsfiddle.net/2GbPS/

实际上，由于您在跨度内有您的复选框，这将起作用：

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

（小提琴更新）

也适用于收音机！

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

【讨论】：

【解决方案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/

【讨论】：

没问题，很高兴我能帮上忙。
还是太复杂了。 (a) 使用<label> 标签来处理单选按钮。 (b) 'MemberClassInactive' 是不必要的——不活动状态可以通过没有'MemberClassActive' 来处理。见DEMO

【解决方案3】：

首先，你想要一个复选框还是一个单选输入？您的代码是无线电输入。

这是一个jsfiddle，显示您的需求

您需要以下 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();
});

【讨论】：