2010-10-14 3 views
8

Мне нужно очистить все остальные флажки, когда пользователь щелкает флажок. Практически такое же поведение, как и переключатель. Пользовательские флажки «A» и флажки «B» и «C» обе сняты. Я использую jquery, но я не могу понять, как это сделать. Есть идеи?Снимите отметку со всех других флажков

Вот как флажки установлены U:

<div class="sales_block_one"> 
<span class="sales_box_option_set"><input type="checkbox" value="1" id="exopt10i11553501716" name="optset[0][id]" /><label for="exopt10i11553501716">Test + &pound;100.00</label></span> 
<span class="sales_box_option_set"><input type="checkbox" value="2" id="exopt11i21553501716" name="optset[1][id]" /><label for="exopt11i21553501716">Test + &pound; 200.00</label></span> 
<span class="sales_box_option_set"><input type="checkbox" value="3" id="exopt12i31553501716" name="optset[2][id]" /><label for="exopt12i31553501716">Test 3 + &pound;400.00</label></span> 
</div> 
+2

почему вы не используете радиокнопку? это простой способ. – klox

+1

@klox - возможно, OP хочет проверить (☑) на дизайне;) – Reigel

+0

Да, я знаю, что переключатели будут идеальными, но они не могут использоваться в приложении. – Thomas

ответ

17

если все галочки являются братьями и сестрами, это так же, как это,

$(':checkbox').change(function(){ 

    if (this.checked) { 
     $(this).siblings(':checkbox').attr('checked',false); 
    } 

}); 

crazy demo

Ну, если вы действительно хотите чтобы скопировать поведение переключателя, просто как это,

$(':checkbox').change(function(){ 
     this.checked = true; 
     $(this).siblings(':checkbox').attr('checked',false);  
}); 

crazy demo


братья, когда элементы имеет один и тот же родительский контейнер /.

образец

<div> 

<input type="checkbox" /><label>A</label> 
<input type="checkbox" /><label>B</label> 
<input type="checkbox" /><label>C</label> 
<input type="checkbox" />​<label>D</label> 

</div> 

в том, что, с <input> и <label> ы являются братьями и сестрами.


В вашем случае, что это не братья и сестры, вы можете сделать это таким образом,

$('.sales_block_one :checkbox').change(function() { 
    var $self = this; // save the current object - checkbox that was clicked. 
    $self.checked = true; // make the clicked checkbox checked no matter what. 
    $($self).closest('span') // find the closest parent span... 
     .siblings('span.sales_box_option_set') // get the siblings of the span 
     .find(':checkbox').attr('checked',false); // then find the checbox inside each span and then uncheck it. 
});​ 

crazy demo

more about traversing

+1

+1 это лучший способ использования «родных братьев» – klox

+0

Тупой вопрос: что такое братья и сестры? Я googled безрезультатно. – Thomas

+0

см. Редактировать пожалуйста ... – Reigel

1
$("#checkboxA").click(function() { 
    var checkedStatus = this.checked; 
    $("#checkboxB_And_C_Selector").each(function() { 
     this.checked = !checkedStatus; 
    }); 
}); 
+0

Это не будет работать должным образом, потому что это вызовет проверку всех других ящиков, когда вы нажмите, чтобы снять флажок. –

Смежные вопросы