试图在单击另一个元素时切换复选框

Question

I have p tag and when I click on the p tag I want to toggle the checkbox's check. right now it only works on the first toggle. when I click on the p the box gets checked and when I click on it again the box gets unchecked but that's it. If I click on it again nothing happens on the screen. when I inspect element in firebug the checked attribute appears and disappears, which I think is what is supposed to happen, but nothing appears on the screen. I tried using prop() and it didn't work. here's what I have with attr()

$(".clickMe").on("click", function(){
    if($("#thisBox").attr("checked") ){
        $("#thisBox").removeAttr("checked")
    }else{
        $("#thisBox").attr("checked","checked")
    }
})

And could someone tell me if there is a way to check to see if an element changes. Like **if**($(el).changes(){ do this } ) what's the pattern for that

Answer 1

Try this

 $(".clickMe").on("click", function(){ if($('#thisBox')[0].checked){ $('#thisBox').prop('checked', false); }else{ $('#thisBox').prop('checked', true); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <input type="checkbox" id="thisBox" /> Testing Checkbox <input type="button" class="clickMe" text="test" value="testing button"/> 

Answer 2

Use this Demo Here

$(".clickMe").on("click", function(){
    if($("#thisBox").is(':checked')){
         $('#thisBox').prop('checked', false);
    }else{
         $('#thisBox').prop('checked', true);
    }
})

Answer 3

Just trigger the event:

$(".clickMe").on("click", function(){
    $("#thisBox").trigger("click");
});

LIVE