CODEWITHSUNDEEP
javascriptjquery
user1493339
user1493339

Reputation: 429

How to hide the parent of an unchecked checkbox?

I have a set of random/dynamic generated div checkboxes:

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

What I am trying to do is when the user:

  1. checks any A then the others will hide (entire div) but all A will still show.
  2. unchecks a checkbox, then all A, B, C will show again.

This is because I am preventing the user from checking a mix of options.

PS: You can provide a solution that might need me to modify the generated output of checkboxes.

Upvotes: 1

Views: 501

Answers (8)

user1493339
user1493339

Reputation: 429

Thanks guys, especially dbaseman (get me ideal) : ok, Here is my code after referring from you all.

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

so far code able is performing as what i need.
Ps: i am still weak on jquery travelling part

Ps: Edited on re-opening all checkboxes part
Thanks once again!

Upvotes: 0

RobG
RobG

Reputation: 147363

Overwhelmed by choice! Here's a plain JS version that just disables members of the non–selected groups.

I think that's better than hiding them so users can see the other options after they've selected one. Otherwise, to see the other options again, they must deselect all checkboxes in the group.

Note that div is a parent of the inputs, the listener passes a reference to the element and the related event object, modify as required.

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

Upvotes: 0

Habibillah
Habibillah

Reputation: 28695

Try code bellow:

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

});

You can try on jsFiddle

Upvotes: 1

cbayram
cbayram

Reputation: 2259

This will hide all other checkbox types when FIRST of a type is checked and show all the other checkbox types when ALL of the checked box type are unchecked:

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

Upvotes: 0

rahul
rahul

Reputation: 7663

you can simple do it like this

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

Upvotes: 1

McGarnagle
McGarnagle

Reputation: 102743

You can use some JQuery traversing to hide the non-matching elements:

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

Upvotes: 1

Muthu Kumaran
Muthu Kumaran

Reputation: 17910

Try this one,

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

​

Demo: http://jsfiddle.net/muthkum/uRd3e/3/

Upvotes: 1

Pragnesh Chauhan
Pragnesh Chauhan

Reputation: 8476

try this 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();
}    
});​

Upvotes: 1

Related Questions