复选框中的jQuery addClass和removeClass

jQuery addClass and removeClass in checkboxes

本文关键字：removeClass addClass jQuery 复选框      更新时间：2023-09-26

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

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

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

我已经启动了它的脚本，但由于某种原因，当我开始在第一个选择中选择"是"，在第二个选择中再选择"是的"时，如果我要在第三个项目中选择"否"，则2个"是"将被删除。如果我选择全部是和全部否是可以的，但如果我要选择另一个是和否，它不允许我这样做。

这是我的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>

有人能帮我吗？

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

使用以下语法可以非常容易地缩小选择器的范围：jQuery('selector', context)。

在这种情况下，我推荐this.parentNode，如下所示：

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

请在此处查看我的演示：http://jsfiddle.net/m5aug81a/

有关为jQuery对象使用上下文的更多信息，请参阅此处的

您必须仅从yes或no的同级中删除所选类。以下是代码：

<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>
相关文章：