1

我有一组随机/动态生成的 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>

我想要做的是当用户：

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

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

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

4

8 回答 8

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" : "");
});
于 2012-10-18T04:09:16.853 回答
1

试试这个小提琴 

$("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();
}    
});​
于 2012-10-18T04:18:33.857 回答
1

试试下面的代码：

$(":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

于 2012-10-18T04:22:45.273 回答
1

试试这个，

$('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();
      }
  }
})

​</p>

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

于 2012-10-18T04:24:39.573 回答
1

你可以像这样简单地做到这一点

$('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();
    }

});​

现场演示

于 2012-10-18T04:28:39.287 回答
0

谢谢大家，特别是 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：编辑重新打开所有复选框部分
再次感谢！

于 2012-10-18T04:34:23.903 回答
0

这将在选中类型的 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();
    }
});
于 2012-10-18T04:39:57.503 回答
0

被选择淹没！这是一个简单的 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>
于 2012-10-18T05:34:47.700 回答