隐藏/显示复选框，一旦选中其他复选框并设置了条件值

Question

I am trying to hide a set of checkbox when one of these is checked, and make them reappear once it is not checked. The conditions must be based on their value .

var input = document.getElementsByTagName("input");

for(i=0;i<input.length;i++){


input[i].onchange = function(){
    if(this.checked){
var value = $(this).val();
$("input[type=checkbox]:not(." + '60' + ")").hide();
$("input[type=checkbox]." + '60').show();
}
  }
     }

The group of checkbox to hide belong to the values 60 and 90 (two arms accessories can't be selected), the idea is that the two checkboxes cannot be selected, just one, so that's why I need to hide one of them once they're checked, and make them reappear once unchecked.

        <input type="checkbox" value="50" /> conductive plastic foot cup $50<br/>
        <input type="checkbox" value="60" /> <a>T-arms 2 $60</a><br/>
        <input type="checkbox" value="90" /> <a>T-arms 1 $90</a><br/>
        <input type="checkbox" value="80" /> metal rails $80<br/>
        <input type="checkbox" value="30" /> plastic rails $30<br/>
        <input type="checkbox" value="70" /> foot rest ring $70<br/>
        <input type="checkbox" value="120" />plastic five star foot $120 <br/>

Here is my fiddle: JS fiddle

Answer 1

I'd suggest the following jQuery:

$('.arms').change(
    function(){
        $('.arms').not(this).prop('disabled',this.checked);
    });

Coupled with the amended HTML:

<input id="check1" type="checkbox" value="50" />
<label for="check1">conductive plastic foot cup $50</label>
<input id="check2" type="checkbox" value="60" class="arms" />
<label for="check2">T-arms 2 $60</label>
<input id="check3" type="checkbox" value="90" class="arms" />
<label for="check3">T-arms 1 $90</label>
<input id="check4" type="checkbox" value="80" />
<label for="check4">metal rails $80</label>
<input id="check5" type="checkbox" value="30" />
<label for="check5">plastic rails $30</label>
<input id="check6" type="checkbox" value="70" />
<label for="check6">foot rest ring $70</label>
<input id="check7" type="checkbox" value="120" />
<label for="check7">plastic five star foot $120</label>

JS Fiddle demo .

The above uses the label element, with a for attribute (or property) to associate the text explicitly with the relevant checkbox .

I've added a class to the input s that are mutually-exclusive in order to easily target them with a selector, which sets the disabled property of the other element (or elements if you add more mutually-exclusive checkboxes ) according to whether the checked, or unchecked, element is checked or unchecked.

Incidentally, it's usually better to disable form-fields, rather than removing/hiding them, that way if a user clicks by accident they're not left wondering where the other option's gone to, or surprised when it suddenly reappears.

If, however, you really want to show/hide the 'other' element(s), then you can use the following:

$('.arms').change(
    function(){
        $('.arms').not(this).add($(this).next())[this.checked ? 'hide' : 'show']();
    });

JS Fiddle demo .

Or you can even use the first approach (using the prop('disabled',this.checked) ) with the following CSS (in compliant browsers that implement the :disabled pseudo-selector:

input:disabled,
input:disabled + label {
    display: none;
}

JS Fiddle demo .

References:

• add() .
• change() .
• next() .
• not() .
• prop() .

Answer 2

I love the use of data attributes for such kind of stuff:

HTML

<input type="checkbox" value="50" /> conductive plastic foot cup $50<br/>
<input type="checkbox" value="60" data-exclude="input[value=90]" /> T-arms 2 $60<br/>
<input type="checkbox" value="90" data-exclude="input[value=60]" /> T-arms 1 $90<br/>
<input type="checkbox" value="80" /> metal rails $80<br/>
<input type="checkbox" value="30" /> plastic rails $30<br/>
<input type="checkbox" value="70" /> foot rest ring $70<br/>
<input type="checkbox" value="120" />plastic five star foot $120 <br/>

JavaScript

var input = document.getElementsByTagName("input");

$('input').each(function() {
    var $input = $(this);
    $input.change(function() {
        var $exclude = $($input.data('exclude'));
        $exclude.toggle(! $input.is(':checked'));
    });
});

Live demo

http://jsfiddle.net/bikeshedder/2H5kB/10/

btw. I'd rather disable the checkbox than hiding it.