單擊div內的複選框可更改複選框的狀態。 jQuery

有人可以幫我解決這個問題嗎？單擊div內的複選框可更改複選框的狀態。 jQuery

$('.check_group').click(function() { 
 
    var check = $(this).children('input')[0]; 
 
    check.checked = !check.checked; 
 
    alert(check.checked); 
 
    //run something else 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="check_group" style="background-color: rgb(200, 138, 59);"> 
 
    <input type="checkbox" /> 
 
</div>

所以，當我點擊複選框 - 改變複選框的狀態，然後觸發jQuery和狀態變回。

如何製作以便當您點擊div /複選框 - 複選框已更改並且存在警報？

來源

2016-08-31 Pavel

尼斯的挑戰！注意到，在火狐瀏覽器（檢查47）它是按預期工作，但不是在谷歌瀏覽器，我沒有足夠的勇氣檢查IE ...大聲笑 –

什麼是不工作？臨時解決方案（我的答案）在IE和Google chrome上工作.. – Pavel

@Pavel：你有沒有試過我的答案？ –

試試這個代碼，你需要確定點擊DIV的時候，那麼你需要使該複選框選中/未選中。

$('.check_group').click(function (e) { 
 
    var input = $(this).children('input[type="checkbox"]'); 
 
    //Identify the node which is clicked 
 
    if(e.target.nodeName == "DIV") 
 
    { 
 
     $(input).prop('checked', !$(input).prop("checked")); 
 
    } 
 
    console.log($(input).is(":checked")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="check_group" style="background-color: rgb(200, 138, 59);"> 
 
    <input type="checkbox" /> 
 
</div>

來源

2016-08-31 07:10:52

你想做這個嗎？

$('.check_group').click(function() { 
 
    var checkbox = $(this).children('input')[0]; 
 
    setTimeout(function(){alert(checkbox.checked);},200); 
 
    //run something else 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="check_group" style="background-color: rgb(200, 138, 59);"> 
 
    <input type="checkbox" /> 
 
</div>

的setTimeout不是必需的，除非你想直觀地展現檢查，然後再警報

來源

2016-08-31 00:50:31

當我點擊Div時，我需要更改複選框狀態。「check.checked =！check.checked;」 - 它是重要的。你的代碼有同樣的問題，但慢慢=） – Pavel

臨時解決方法：

$('.check_group').click(function (e) { 
 
    var check = $(this).children('input')[0]; 
 
    if (e.target.tagName == "INPUT") { 
 
     check.checked = !check.checked; 
 
    } 
 
    check.checked = !check.checked; 
 
    alert(check.checked); 
 
    // 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="check_group" style="background-color: rgb(200, 138, 59);"> 
 
    <input type="checkbox" /> 
 
</div>

來源

2016-08-31 04:25:23 Pavel

單擊div內的複選框可更改複選框的狀態。 jQuery

回答

相關問題