复选框中的 jQuery addClass 和 removeClass答案

【问题标题】：jQuery addClass and removeClass in checkboxes复选框中的 jQuery addClass 和 removeClass
【发布时间】：2014-08-25 14:55:57
【问题描述】：

我是 jQuery 新手，我正在尝试弄清楚如何创建复选框的 jQuery 函数，我想要实现的是，当用户单击 Yes 时，复选框（将显示：none ) 会有一个复选标记。但是，如果用户单击否，则复选标记将被删除。

这将是多个是和多个否的选择

看看我正在处理的页面http://jsfiddle.net/4x2f52ka/

我已经为它启动了脚本，但是由于某种原因，当我开始在第一个选项上选择是时，对第二个选项选择另一个是，如果我要对第三个项目选择否，则 2 Yes 将是删除。如果我将选择全部是和全部否，那很好，但如果我要选择交替的是和否，它不允许我这样做。

这是我的 html 代码

<div class="row marginBottom">
    <div class="col-xs-6">
        <label class="alignMid">Have you found a property?</label>
    </div>
    <div class="col-xs-6">
        <span class="opt_yes"><p style="line-height: 38px; font-size:15px;">YES</p></span>
        <span class="opt_no"><p style="line-height: 38px; font-size:15px;">NO</p></span>
        <input type="checkbox" name="FoundProperty"/>
    </div>
</div>  

<div class="row marginBottom">
    <div class="col-xs-6">
        <label class="alignMid">Would you like a free RP Data Property Report?</label>
    </div>
    <div class="col-xs-6">
        <span class="opt_yes"><p style="line-height: 38px; font-size:15px;">YES</p></span>
        <span class="opt_no"><p style="line-height: 38px; font-size:15px;">NO</p></span>
        <input type="checkbox" name="FreeRPData"  />
    </div>
</div>

这是我的 jQuery 代码

<script type="text/javascript"> 
jQuery(document).ready(function () { 
    jQuery('.opt_yes').click(function () {      
        jQuery(this).addClass('selected'); 
        jQuery('.opt_no').removeClass('selected')
            if (jQuery(this).hasClass('selected')) { 
            jQuery(this).parent().find("input[type='checkbox']").prop('checked', true); 
            } 
    }); 
    jQuery('.opt_no').click(function () {       
        jQuery(this).addClass('selected'); 
        jQuery('.opt_yes').removeClass('selected')
            if (jQuery(this).hasClass('selected')) { 
            jQuery(this).parent().find("input[type='checkbox']").prop('checked', false); 
            } 
    });     

}); 
</script>

谁能帮帮我？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap checkbox

【解决方案1】：

您正在丢失复选框的上下文。它适用于是，因为您使用this，但对于没有项目，您只需使用jQuery('.opt_no') 抓取文档上的每个“无框”。因为它太宽泛了，所以所有“无框”框都会受到影响。

您可以使用以下语法轻松缩小选择器范围：jQuery('selector', context)。

在这种情况下，我推荐this.parentNode 像这样：

jQuery('.opt_yes', this.parentNode).removeClass('selected')

在这里查看我的演示：http://jsfiddle.net/m5aug81a/

有关为 jQuery 对象使用上下文的更多信息，see here

【讨论】：

【解决方案2】：

您必须仅从是或否的同级中删除选定的类。代码如下：

<script type="text/javascript"> 
jQuery(document).ready(function () { 
jQuery('.opt_yes').click(function () {      
    jQuery(this).addClass('selected'); 
    jQuery(this).siblings('.opt_no').removeClass('selected')
        if (jQuery(this).hasClass('selected')) { 
        jQuery(this).parent().find("input[type='checkbox']").prop('checked', true); 
        } 
}); 
jQuery('.opt_no').click(function () {       
    jQuery(this).addClass('selected'); 
    jQuery(this).siblings('.opt_yes').removeClass('selected');
        if (jQuery(this).hasClass('selected')) { 
        jQuery(this).parent().find("input[type='checkbox']").prop('checked', false); 
        } 
});     

}); 
</script>

【讨论】：