Toggle Checkbox_问答_开发者_运维开发者技术经验分享

I have 4 checkboxes and I wish to toggle them (checked or unchecked) and they should all be the same what ever state they are in. I have this so far:

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;  }
}

On page load some of the chec开发者_C百科kboxes may be ticked or not ticked - but once I click a link and run this function, I want these checkboxes to go all to the same state.

When I try the above, it just doesn't seem to tick the boxes and sometimes it ticks them all and running this function again does nothing. What is going on? I am coffee deprived and confused!

Should be making use of a checkbox group or something?

Thanks all for any help

........

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;
    }
}

Checked is a "funny" attribute. One thing I'd suggest is rather than attr('checked', false), try removeAttr('checked') instead.

Basically, in the DOM, the rendered element will have checked as an attribute, or if it's being XHTML compliant, checked=checked. So, setting it to false isn't the right thing to do.

As far as the other issues, I'm not enough of a jQuery pro yet to know.

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

    });

It can also be done using only javascript without troubles, you can use an image or anything that lets you click it too.

<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>

I hope this helps.

Well, for different approach: Sets checkboxs all to whatever it wasn't:

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);
  });
});

NOTE IF you give them a class called "mycheckbox" even simpler:

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

Instead of setting the attribute checked to false, just remove it altogether! :)

$('#'+element+'_1').removeAttr('checked');

Here's an example:

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;        
});

Make sure that you don't call check_them before the DOM is finished loading

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

Also, you can simplify this whole thing to the following:

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;
    };
})();

Toggle Checkbox

精彩评论

关注公众号

热门标签

图文推荐

Toggle Checkbox

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：