Question

我有一组随机/动态生成的div复选框：

<div>A1 <input type='checkbox' name='A[]' value='A1'> </div>
<div>A2 <input type='checkbox' name='A[]' value='A2'> </div>
<div>A3 <input type='checkbox' name='A[]' value='A3'> </div>
<div>B1 <input type='checkbox' name='B[]' value='B1'> </div>
<div>B2 <input type='checkbox' name='B[]' value='B2'> </div>
<div>C1 <input type='checkbox' name='C[]' value='C1'> </div>

我想要做的是当用户：

检查任何A然后其他人将隐藏（整个div），但所有A仍将显示。
取消选中一个复选框，然后所有A，B，C将再次显示。

这是因为我阻止用户检查混合选项。

PS：您可以提供一个解决方案，可能需要我修改生成的复选框输出。

Answer 1

您可以使用一些JQuery遍历来隐藏不匹配的元素：

// add the event handler
$("input[type=checkbox]").on("change", function() {
    // get whether checked or unchecked
    var checked = $(this).prop("checked") === true;

    // get the name of the clicked element (eg, "A[]")
    var thisName = $(this).prop("name");

    // get the name of the clicked element (eg, "A[]")
    var thisName = $(this).prop("name");

    // get the grandparent element
    $(this).parent().parent()
        // get all the checkboxes
        .find("input[type=checkbox]")
        // filter to only the ones that don't match the current name
        .filter(function(i, e) { return e.name != thisName; })
         // hide or display them
        .css("display", checked ? "none" : "");
});

Answer 2

试试这个fiddle

$("input[type=checkbox]").on("change", function() {
var thisName = $(this).attr("name");
if($(this).is(':checked')){
    $(':checkbox').parent().hide();
$('input:checkbox[name|="'+thisName+'"]').parent().show();
} else {
    $(':checkbox').parent().show();
}    
});

Answer 3

尝试下面的代码：

$(":checkbox").click(function() {
    var identifier = $(this).val().substring(0, 1);

    $("input[type='checkbox']").each(function() {
        if ($(this).val().indexOf(identifier) != -1) {
            $(this).parent().show();
        } else {
            $(this).parent().hide();
        }
    });

    if ($("input:checked").length == 0) {
        $("input[type='checkbox']").parent().show();
    }

});

您可以尝试jsFiddle

Answer 4

试试这个，

$('input:checkbox').click(function(){
  if($(this).attr('checked') == 'checked'){
     $('input:checkbox').parent('div').hide();
     $('input:checkbox[name="'+$(this).attr('name')+'"]').parent('div').show();
  }else{
      if(!$('input:checkbox[checked="checked"]').length){
         $('input:checkbox').parent('div').show();
      }
  }
})

演示：http://jsfiddle.net/muthkum/uRd3e/3/

Answer 5

你可以这么简单地做到这一点

$('input[type=checkbox]').change(function () {
    if ($(this).attr('checked')) {
       var Name = $(this).prop("name");    
        $('div').filter(function(){
            return $(this).find('input[type=checkbox]').prop("name") != Name;
}).hide(); 
    }
    else
    {
      $('input[type=checkbox]').attr('checked',false);
      $('input[type=checkbox]').parent('div').show();
    }

});

Live Demo

Answer 6

谢谢你们，特别是dbaseman（让我理想）：好的，这是我的代码，在你们所有人的推荐之后。

$("input[type=checkbox]").on("click", function() {
    var sta = $(this).is(":checked"); sta=(sta==true?1:0);
    if(sta==1){
        var thisName = $(this).prop("name"); thisName=thisName.replace("[]","");
        $("div input[type=checkbox]:not([name^=" + thisName + "])").parent().hide();
    }else{
        var num = $("[type=checkbox]:checked").length;
    if(num==0){
            $("div input[type=checkbox]").parent().show();
    }
    }
});

到目前为止，代码能够按照我的需要执行 Ps：我仍然对jquery旅行部分很弱

Ps：编辑重新打开所有复选框部分
再次感谢！

Answer 7

当选中FIRST类型时，这将隐藏所有其他复选框类型，并在未选中所有选中的复选框类型时显示所有其他复选框类型：

$("input:checkbox").on("change", function() {
    // get the name attribute
    var nameAttr = $(this).prop("name");
    // check how many checkbox inputs of that name attribute are checked
    var checkedLength = $("input:checkbox[name=\"" + nameAttr + "\"]:checked").length;
    // if 0, display other checkbox inputs, else if 1 hide all of the rest
    if(checkedLength == 0) {
        $("input:checkbox[name!=\"" + nameAttr + "\"]").parent().show();    
    }else if(checkedLength == 1) {
        $("input:checkbox[name!=\"" + nameAttr + "\"]").parent().hide();
    }
});

Answer 8

选择不堪重负！这是一个普通的JS版本，它只是禁用非选定组的成员。

我认为这比隐藏它们更好，因此用户在选择其他选项后可以看到其他选项。否则，要再次查看其他选项，他们必须取消选择组中的所有复选框。

请注意div是输入的父级，侦听器传递对元素和相关事件对象的引用，并根据需要进行修改。

<script>
function doStuff(div, evt) {
  var checked, el, group, j, inputs, name, re;
  var t = evt.target || evt.srcElement;

  if (t.nodeName && t.nodeName.toLowerCase() == 'input' && t.type == 'checkbox') {
    inputs = div.getElementsByTagName('input');
    name = t.name;

    // Set checked to true if any input with this name is checked
    group = document.getElementsByName(name);
    j = group.length;
    while (j-- && !checked) {
        checked = group[j].checked;
    }

    // Loop over inputs, hide or show depending on tests
    for (var i=0, iLen=inputs.length; i<iLen; i++) {
      el = inputs[i];

      // If name doesn't match, disable
      el.disabled = checked? (el.name != name) : false;
    }
  } 
}
</script>

<div onclick="doStuff(this, event)">
<div>A1 <input type='checkbox' name='A[]' value='A1'></div>
<div>A2 <input type='checkbox' name='A[]' value='A2'></div>
<div>A3 <input type='checkbox' name='A[]' value='A3'></div>
<div>B1 <input type='checkbox' name='B[]' value='B1'></div>
<div>B2 <input type='checkbox' name='B[]' value='B2'></div>
<div>C1 <input type='checkbox' name='C[]' value='C1'></div>
</div>

如何隐藏未选中复选框的父级？

8 个答案: