Question

这有点奇怪。摘要：
我有一些复选框（他们需要被视为单选按钮，...不要问）..大声笑

当选择一个时，其他所有都需要取消选中，而选中的一个仍然被选中。

这些复选框中有几个“组”。每个'group'在父SPAN上共享相同的className（每个输入复选框都有一个父span，以清除......父span本身的类）

然而..在添加这些跨度/复选框并动态添加新（附加）类时，已存在类名。

因此任何给定的GROUP（跨度）都将具有相同的类..

如：

ControlValue Class00
ControlValue Class01
ControlValue Class02
ControlValue Class03
ControlValue Class04

... etc..etc ..

我正在尝试以下方法：

当选中/选中复选框时..我获取父级别名称，将其保存为稍后要使用的变量，....使用相同的类名变量获取这些元素的列表（即：ControlValue Class00） ..然后尝试迭代它们取消选中child（）输入复选框。

然而，我的选择器无法正常工作..当我检查它时，我总是拿出0长度

如果我使用更通用的选择器并添加一个hasClass（）..它似乎工作......

$('input:checkbox').change(function(){
    if ($(this).is(':checked')) {
        var targetClass = $(this).parent().prop('class');
        //var targetParent = $(this).parent().hasClass(targetClass);

        console.log($('.'+targetClass).length); //0?  WTF?

        $('span .'+targetClass).each(function(i) { //doesnt work
        //$('div span').each( function(i) { //works
            //if ($(this).hasClass(targetClass) ) {
                //console.log("class found....");
                $(this).children("input[type='checkbox']:first").prop('checked', false);
            //}
        });         
        $(this).prop('checked', true); //leave self checked
    }   
});

我确定我的选择器出了问题...？

JSFiddle显示标记示例

https://jsfiddle.net/vxpzs8sj/6/

更新

所以这两个解决方案都有效...我不太热衷于使用.hasClass（）循环..但我认为它的解决方案并不是那么糟糕..

$('input:checkbox').change(function(){
    if ($(this).is(':checked')) {
        var targetClass = $(this).parent().prop('class'); 
        //or this works as well, more lines uses a .hasClass() loop 
        $('div span').each( function(i) { //works
            if ($(this).hasClass(targetClass) ) {
                $(this).children("input[type='checkbox']:first").prop('checked', false);
            }
        });
        $(this).prop('checked', true); //leave self checked
    }                                    
});

新方法（工作解决方案）

$('input:checkbox').change(function(){
    if ($(this).is(':checked')) {
        var targetClass = $(this).parent().prop('class'); 
        //this works (smaller code)
        $("span[class*='"+targetClass+"']").each(function(i) {
            $(this).children("input[type='checkbox']:first").prop('checked', false);
        });
        $(this).prop('checked', true); //leave self checked
    }                                    
});

Answer 1

从jsfiddle（经过一点清理）

＆＃13;

<!-- group 1 -->
<span class="span1 clas00">
  <input type="checkbox" id="cbox1" value="first_checkbox">
</span>
<span class="span1 clas00">
  <input type="checkbox" id="cbox2" value="first_checkbox">
</span>
<br>
<!-- group 2 -->
<span class="span2 clas01">
  <input type="checkbox" id="cbox3" value="first_checkbox">
</span>
<span class="span2 clas01">
  <input type="checkbox" id="cbox4" value="first_checkbox">
</span>
<br>
<!-- group 3 -->
<span class="span2 clas02">
  <input type="checkbox" id="cbox5" value="first_checkbox">
</span>
<span class="span2 clas02">
  <input type="checkbox" id="cbox6" value="first_checkbox">
</span>
<span id="lenght"></span>
<span id="class"></span>
<span id="spanObject"></span>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

var targetClass = $(this).parent().prop('class');
// targetClass = 'span1 clas00'

＆＃13;

说，选择第一个复选框时：

$('.'+targetClass)

所以，clas00 = $（＆＃39; .span1 clas00＆＃39;）。 问题是.each被视为HTML元素而不是类。因此，$('.span1.clas00')循环永远不会实际执行。

jQuery选择器应该是$('.span1 clas00')而不是.（注意，两个类名之间的$('input:checkbox').change(function(){ if ($(this).is(':checked')) { var targetClass = $(this).parent().prop('class'); $('.'+targetClass.replace(" ", ".")).each(function(i) { $(this).children("input[type='checkbox']").prop('checked', false); }); $(this).prop('checked', true); } });）

工作版本：

＆＃13;

<!-- group 1 -->
<span class="span1 clas00">
  <input type="checkbox" id="cbox1" value="first_checkbox">
</span>
<span class="span1 clas00">
  <input type="checkbox" id="cbox2" value="first_checkbox">
</span>
<br>
<!-- group 2 -->
<span class="span2 clas01">
  <input type="checkbox" id="cbox3" value="first_checkbox">
</span>
<span class="span2 clas01">
  <input type="checkbox" id="cbox4" value="first_checkbox">
</span>
<br>
<!-- group 3 -->
<span class="span2 clas02">
  <input type="checkbox" id="cbox5" value="first_checkbox">
</span>
<span class="span2 clas02">
  <input type="checkbox" id="cbox6" value="first_checkbox">
</span>
<span id="lenght"></span>
<span id="class"></span>
<span id="spanObject"></span>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

{{1}}

＆＃13;

参见 JSFiddle

jQuery +按变量类选择元素（即使它有多个类）

1 个答案:

工作版本：