Programatically изменения проверено на флажке

Question

У меня есть следующие две галочек:

<input type="checkbox" id="id3"></input> 
<input type="checkbox" id="id4"></input> 

желаемое поведение является то, что, когда я нажимаю на id3, id4 следует принять.

, который отлично работает для первого и второго кликов, но после этого больше нет. любая идея почему?

здесь мой сценарий:

<script> 
     function test2() 
     { 
     var checked = this.checked; 
     if(checked) 
      $("#id4").attr("checked", "checked"); 
     else 
      $("#id4").removeAttr("checked"); 
     }  

     $("#id3").click(test2); 
</script> 

(или рабочий додзё здесь http://dojo.telerik.com/eviTi)

Answer 1

Используйте change событие (не click) и играть с .prop методом вместо .attr

Причина:Если существует свойство и атрибут с таким же именем, обычно обновляется один date, но это не относится к некоторым атрибутам входов, например value и checked: для этих атрибутов свойство всегда представляет текущее состояние, в то время как атрибут (за исключением старых версий IE) соответствует значению по умолчанию/проверка входного сигнала. [Ref]

function test2() { 
 
    $("#id4").prop("checked", this.checked); 
 
} 
 
$("#id3").change(test2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type="checkbox" id="id3"> 
 
<input type="checkbox" id="id4">

Answer 2

Использование .prop() вместо .attr()

function test2() 
    { 
     var checked = this.checked; 
     if(checked) 
     { 
     $("#id4").prop("checked", "checked"); 
     } 
     else 
     $("#id4").removeAttr("checked"); 
    }  

Answer 3

Использование .prop() вместо .attr()

, как, как этот

function test2() 
 
    { 
 
    var checked = this.checked; 
 
    if(checked) 
 
     $("#id4").prop("checked", "checked"); 
 
    else 
 
     $("#id4").removeAttr("checked"); 
 
    }  
 

 
    $(document).ready(function(){ 
 
    $("#id3").click(test2); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="id3"></input> 
 
<input type="checkbox" id="id4"></input> 
 

 

 

 

Answer 4

Я изменил свой код, но проблема attr(). Используйте prop() вместо

$("body").on("change","#id3",function(){ 
 
    if($(this).is(":checked")){ 
 
    $("#id4").prop("checked","checked"); 
 
    } else{ 
 
     $("#id4").removeProp("checked"); 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="id3"></input> 
 
<input type="checkbox" id="id4"></input>

Answer 5

Вы можете просто использовать

function test2() 
{ 
    var checkBox = $("#id4"); 
    checkBox.prop("checked", !checkBox.prop("checked")); 

}  

$("#id3").click(test2); 

Answer 6

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

атр делает манипуляции DOM, но Prop только изменяет внутреннее свойство любого DOM

<script> 


     function test2() 
    { 
     var checked = this.checked; 

     if(checked) 
     { 
     $("#id4").prop("checked", "checked"); 
     } 
     else 
     $("#id4").prop("checked", false); 
    }  

    $("#id3").change(test2); 

</script>