2015-11-10 6 views
0

У меня есть 2 флажка. Они должны быть синхронизированы, поэтому я сделал некоторые JQueryОтключить onclick, когда событие из другого onclick

<input type="checkbox" id="check1" onclick="jQuery('#check2').trigger('click')"> 
<input type="checkbox" id="check2" onclick="jQuery('#check1').trigger('click')"> 

Когда я нажимаю Check1, Check2 будет проверяться/бесконтрольно, но и вызывает OnClick из Check2, так check1 будут проверены -> бесконтрольно. Как я могу это решить?

+0

http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a -группа – tredzko

+1

Это только для тестирования? Кажется, очень странное поведение требует, возможно, даже проблемы XY. –

+1

Установить проверенное свойство вместо запуска события click –

ответ

1

Попытка размещения элементов внутри родительского контейнера, используя change событие, прикрепленный к parentElement :checkbox; в пределах заданных change обработчика сибсов элементов checked свойство текущего элемента checked свойство

$("div :checkbox").on("sync", function(e) { 
 
    console.log(e.target.id) 
 
}) 
 

 
$("div :checkbox").on("change", function() { 
 
    $(this).siblings().prop("checked", this.checked) 
 
    .trigger("sync") 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div> 
 
    <input type="checkbox" id="check1" /> 
 
    <input type="checkbox" id="check2" /> 
 
</div>

+0

Thx dude - вот что я ищу. –

1

В общем, вы должны использовать переключатель для этого, так как он имеет встроенную функцию. Чтобы ответить на ваш вопрос, вам нужно установить/удалить проверенное состояние, вместо того, чтобы запускать щелчок.

<input type="checkbox" id="check1" onclick="jQuery('#check2').attr('checked', false)"> 
<input type="checkbox" id="check2" onclick="jQuery('#check1').attr('checked', false)"> 

Если вы хотите, чтобы синхронизировать их, то вы можете переместить JS, так что он не встраивать и использовать что-то вроде:

jQuery(function() { 
    var boxes = $('input[type=checkbox]'); 

    boxes.on('click', function(evt) { 
     var other = boxes.not($(this)); 

     if(other.is(':checked')) 
      other.removeAttr('checked'); 
     else 
      other.attr('checked', true); 
    }); 
}); 
+3

На jq 1.6+ вы должны использовать prop() –

+0

Вы всегда можете просто использовать '.removeAttr ('checked');' – Chris

+0

Но это не переключает его. Если это было * un * -checked, то это не установило бы другое значение true. –

0

OnClick событие вы используете в ваших HTML элементов ненужным и запутанным. Вместо этого я предлагаю вам добавить класс к обоим элементам, а затем вы можете снять отметку со всех элементов, кроме тех, на которые был просто нажат.

HTML

<input type="checkbox" id="check1" class="myClass" >Box 1 
<input type="checkbox" id="check2" class="myClass">Box 2 

JQuery/JavaScript

var $checkboxes = $('.myClass'); 
$checkboxes.click(function() { 
    $checkboxes.not(this).prop('checked', false); 
}); 

JS Fiddle demo

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