切換復選框

Question

我有4個復選框，我想切換它們（選中或取消選中），它們應該是相同的狀態。我到目前為止：

var toggle_click = false;

function check_them(element){

    if(toggle_click){
        $('#'+element+'_1').attr('checked', true);
        $('#'+element+'_2').attr('checked', true);
        $('#'+element+'_3').attr('checked', true);
        $('#'+element+'_4').attr('checked', true);
    }

    if(!toggle_click){
        $('#'+element+'_1').attr('checked', false);
        $('#'+element+'_2').attr('checked', false);
        $('#'+element+'_3').attr('checked', false);
        $('#'+element+'_4').attr('checked', false);
    }

    if(!toggle_click){ toggle_click = true;   }
    if(toggle_click) { toggle_click = false;  }
}

在頁面加載時，可能勾選或不勾選一些復選框 - 但是一旦我單擊鏈接並運行此功能，我希望這些復選框全部進入相同的狀態。

當我嘗試上面的內容時，它似乎沒有勾選方框，有時它會將它們全部打勾並且再次運行此功能也無效。 到底是怎么回事？ 我被剝奪了咖啡和困惑！

應該使用復選框組還是什么？

謝謝大家的幫助

Answer 1

Checked是一個“有趣”的屬性。 我建議的一件事是attr('checked', false)而不是attr('checked', false) ，嘗試removeAttr('checked') 。

基本上，在DOM中，渲染的元素將作為屬性進行檢查，或者如果它符合XHTML，則checked=checked 。 因此，將其設置為false不是正確的做法。

至於其他問題，我還不夠jQuery專業人士尚未知道。

Answer 2

........

var isChecked = false;

function check_them(element){

    if(isChecked === false) {
        $('#'+element+'_1').attr('checked', true);
        $('#'+element+'_2').attr('checked', true);
        $('#'+element+'_3').attr('checked', true);
        $('#'+element+'_4').attr('checked', true);
        isChecked = true;
    }
    else
    {
        $('#'+element+'_1').attr('checked', false);
        $('#'+element+'_2').attr('checked', false);
        $('#'+element+'_3').attr('checked', false);
        $('#'+element+'_4').attr('checked', false);
        isChecked = false;
    }
}

Answer 3

$('tr').click(function(){
        var chkbox = document.getElementById("chk"+this.id);
        chkbox.checked = !chkbox.checked;

    });

Answer 4

它也可以只使用javascript完成而沒有麻煩，你可以使用圖像或任何讓你點擊它的東西。

<html>
  <body>
    <a href=" javascript:check();"> Toggle </a> <br>
    <input type="checkbox" id="c1" > Un/Check me <br>
    <input type="checkbox" id="c2" > Un/Check me
  </body>
</html>

<script>
function check()
{
  c1.checked = !c1.checked;
  c2.checked = !c2.checked;
}
</script>

我希望這有幫助。

Answer 5

那么，對於不同的方法：將復選框全部設置為它不是：

var toggle_click = false;
function setCheck(mythis)
{
    $('#'+element+'_1').checked = !mythis.checked;
    $('#'+element+'_2').checked = !mythis.checked;
    $('#'+element+'_3').checked = !mythis.checked;
    $('#'+element+'_4').checked = !mythis.checked;
    toggle_click = !toggle_click;
};
$(function() { 
  $('#'+element+'_1').click(function() {
    setCheck(this);
  });
  $('#'+element+'_2').click(function() {
     setCheck(this);
  });
  $('#'+element+'_3').click(function() {
    setCheck(this);
  });
  $('#'+element+'_4').click(function() {
      setCheck(this);
  });
});

注意如果你給他們一個名為“mycheckbox”的課程更簡單：

var toggle_click = false;
$(function() { 
  $('.mycheckbox').click(function() {
    $('.mycheckbox').each().checked = !this.checked;
    toggle_click = !toggle_click;
  });
});

Answer 6

而不是將選中的屬性設置為false，只需將其完全刪除即可！ :)

$（ '＃' +元素+ '_ 1'）removeAttr（ '檢查'）;

這是一個例子：

var state = $("#element1").attr("checked") === "checked" ? true : false;
$("#test").click(function(){    
    $("input[id^=element]").each(function(){
        if(state === false){
            $(this).attr("checked", "checked");
        }else{
            $(this).removeAttr("checked");
        }
    });
    state = !state;        
});

Answer 7

確保在DOM加載完成之前不要調用check_them

$(function() {
    check_them("whatever");
});

此外，您可以將以下內容簡化為以下內容：

var check_them = (function() {
    var is_checked = false; // Now this is not global, huzzah
    return function(element) {
        // You can update all of the elements at once
        $('#'+element+'_1, #'+element+'_2, #'+element+'_3, #'+element+'_4').attr('checked', !is_checked);
        is_checked = !is_checked;
    };
})();

切換復選框

問題描述

7 個解決方案

解決方案1
8 2010-03-02 12:30:22

解決方案2
8 已采納 2010-03-02 12:33:31

解決方案3
4 2012-11-28 03:05:09

解決方案4
2 2017-06-09 01:33:30

解決方案5
1 2010-03-02 13:09:12

解決方案6
0 2010-03-02 12:30:22

解決方案7
0 2010-03-02 12:32:54

切換復選框

問題描述

7 個解決方案

解決方案1 8 2010-03-02 12:30:22

解決方案2 8 已采納 2010-03-02 12:33:31

解決方案3 4 2012-11-28 03:05:09

解決方案4 2 2017-06-09 01:33:30

解決方案5 1 2010-03-02 13:09:12

解決方案6 0 2010-03-02 12:30:22

解決方案7 0 2010-03-02 12:32:54

解決方案1
8 2010-03-02 12:30:22

解決方案2
8 已采納 2010-03-02 12:33:31

解決方案3
4 2012-11-28 03:05:09

解決方案4
2 2017-06-09 01:33:30

解決方案5
1 2010-03-02 13:09:12

解決方案6
0 2010-03-02 12:30:22

解決方案7
0 2010-03-02 12:32:54