隱藏/顯示復選框，一旦選中其他復選框並設置了條件值

Question

我試圖在選中其中一個復選框時隱藏一組復選框，並在未選中時重新顯示它們。 條件必須基於其值 。

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

要隱藏的復選框組屬於值60和90（無法選擇兩個武器附件），其想法是無法選擇兩個復選框，只能選擇一個，因此這就是為什么我需要在其中隱藏一個復選框的原因被選中，並使其一旦取消選中就重新出現。

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

這是我的小提琴： JS小提琴

Answer 1

我建議使用以下jQuery：

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

加上修改后的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小提琴演示 。

上面使用帶有for屬性（或屬性）的label元素將文本與相關的checkbox顯式關聯。

我已經添加了class的input是相互排斥的，以便容易地與一個選擇器，它設定目標文件S disabled 另一元件的特性（或元件如果添加更多互斥checkboxes根據）是否已選中或未選中元素已選中或未選中。

順便說一句，禁用表單域通常比刪除/隱藏表單域更好，這樣一來，如果用戶無意中單擊，他們就不會懷疑另一個選項的去向，也不會驚訝於另一個選項突然出現。

但是，如果您確實要顯示/隱藏“其他”元素，則可以使用以下內容：

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

JS小提琴演示 。

或者甚至可以將第一種方法（使用prop('disabled',this.checked) ）與以下CSS結合使用（在實現:disabled偽選擇器的兼容瀏覽器中）：

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

JS小提琴演示 。

參考文獻：

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

Answer 2

我喜歡將data屬性用於此類工作：

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

現場演示

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

順便說一句 我寧願禁用該復選框，也不願隱藏它。