javascript - チェックされていないチェックボックスの親を非表示にする方法は?

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:チェックボックスの生成された出力を変更する必要があるかもしれない解決策を提供できます。

score 1 · Accepted Answer

あなたはこのようにそれを簡単に行うことができます

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

});

ライブデモ

score 1 · Accepted Answer

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" : "");
});

score 1 · Accepted Answer

このフィドルを試してください

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

score 1 · Accepted Answer

以下のコードを試してください：

$(":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で試すことができます

score 1 · Accepted Answer

これを試して、

$('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/

score 0 · Accepted Answer

これにより、タイプの 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();
    }
});

score 0 · Accepted Answer

みんな、特に 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: すべてのチェックボックスの部分を再度開いて編集しまし
たもう一度ありがとう!

score 0 · Accepted Answer

選択に圧倒されます！これは、選択されていないグループのメンバーを無効にするだけの単純な 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>

javascript - チェックされていないチェックボックスの親を非表示にする方法は?

8 に答える 8

Related

Reference