Question

我是jQuery的新手，我正在试图弄清楚如何创建复选框的jQuery函数，我想要达到的是，当用户点击是复选框时（将有一个显示：none ）将有一个复选标记。但是，如果用户点击“否”，则将删除复选标记。

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

的网页

我已经为它启动了脚本，但出于某种原因，当我开始在第一个选择上选择“是”时，对第二个选择选择“是”，如果我要选择“否”到第3个项目，则“是”将是除去。如果我将选择所有是和所有否，这是好的，但如果我要选择候选是和否，它不允许我。

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

有人可以帮我吗？

Answer 1

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

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

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

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

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

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

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

jQuery addClass和removeClass复选框

2 个答案: