更改/获取CheckBox的检查状态

时间:2011-04-04 13:26:24

标签: javascript html

我只想用JavaScript获取/更改CheckBox的值。并不是说我不能使用jQuery。我尝试过类似的东西,但它不起作用。

JavaScript函数

    function checkAddress()
    {
        if (checkAddress.checked == true)
        {
            alert("a");
        }
    }

HTML

<input type="checkbox" name="checkAddress" onchange="checkAddress()" />

11 个答案:

答案 0 :(得分:79)

使用onclick代替。从理论上讲,它可能无法捕捉通过键盘进行的更改,但是当通过键盘检查时,所有浏览器似乎都会触发事件。

您还需要将复选框传递给函数:

function checkAddress(checkbox)
{
    if (checkbox.checked)
    {
        alert("a");
    }
}

HTML

<input type="checkbox" name="checkAddress" onclick="checkAddress(this)" />

答案 1 :(得分:18)

您需要在使用前检索复选框。

为复选框添加id属性以使用document.getElementById(..)检索它,然后检查其当前状态。

例如:

function checkAddress()
{
    var chkBox = document.getElementById('checkAddress');
    if (chkBox.checked)
    {
        // ..
    }
}

然后您的HTML将如下所示:

<input type="checkbox" id="checkAddress" name="checkAddress" onclick="checkAddress()"/>

(还将onchange更改为onclickDoesn't work quite well in IE:)。

答案 2 :(得分:8)

我知道这是一个非常晚的回复,但这段代码更灵活,应该像我一样帮助后来者。

function copycheck(from,to) {
//retrives variables "from" (original checkbox/element) and "to" (target checkbox) you declare when you call the function on the HTML.

    if(document.getElementById(from).checked==true) 
    //checks status of "from" element. change to whatever validation you prefer.
        {
            document.getElementById(to).checked=true;
             //if validation returns true, checks target checkbox
        }
    else
        {   
            document.getElementById(to).checked=false; 
             //if validation returns true, unchecks target checkbox
        }
}

HTML就像是

<input type="radio" name="bob" onclick="copycheck('from','to');" />

其中“from”和“to”是您希望复制“to”的元素“from”的相应ID。 因为它可以在复选框之间工作,但是只要在从html事件调用发送变量时正确定义“to”(作为要操作的复选框),就可以输入任何你想要的ID和任何你想要的条件。 p>

注意,正如SpYk3HH所说,你想要使用的目标是默认的数组。使用Web开发人员工具栏中的“显示元素信息”工具将帮助您找到相应复选框的完整ID。

希望这有帮助。

答案 3 :(得分:5)

我知道这是迟到的信息,但在jQuery中,使用.checked很容易! 如果您的元素类似于:

<td>
    <input type="radio" name="bob" />
</td>

您可以轻松获取/设置检查状态:

$("td").each(function()
{
    $(this).click(function()
    {
        var thisInput  = $(this).find("input[type=radio]");
        var checked = thisInput.is(":checked");
        thisInput[0].checked = (checked) ?  false : true;
    }
});

秘密是使用“[0]”数组索引标识符,它是jquery对象的ELEMENT! 享受!

答案 4 :(得分:3)

需要:

if (document.forms[0].elements["checkAddress"].checked == true)

假设您有一个表单,否则请使用表单名称。

作为旁注,请勿以同一名称调用元素和函数,否则会导致奇怪的冲突。

答案 5 :(得分:3)

你需要这个:

window.onload = function(){
    var elCheckBox=document.getElementById("cbxTodos");
    elCheckBox.onchange =function (){
        alert("como ves");
    }
};

答案 6 :(得分:2)

<input type="checkbox" name="checkAddress" onclick="if(this.checked){ alert('a'); }" />

答案 7 :(得分:0)

这是我如何使用这种东西的一个例子:

HTML:

<input type="checkbox" id="ThisIsTheId" value="X" onchange="ThisIsTheFunction(this.id,this.checked)">

JAVASCRIPT:

function ThisIsTheFunction(temp,temp2) {
  if(temp2 == true) {
    document.getElementById(temp).style.visibility = "visible";
  } else {
    document.getElementById(temp).style.visibility = "hidden";
  }
}

答案 8 :(得分:0)

var val = $(“#checkboxId”)。is(“:checked”);

答案 9 :(得分:0)

这是带有示例的快速实现:

复选框以检查所有项目:

class CargoForm(ModelFormWithHelper):
    class Meta:
        model = Cargo
        exclude = []
        helper_custom_layout = Layout(
            Div(
                'name',
                'order',
                css_class='col-6 offset-3',
            ),
        )

单个项目(用于表格行):

self.helper.add_input

jQuery的Js代码:

<input id="btnSelectAll" type="checkbox">

批量删除项目:

<input class="single-item" name="item[]" type="checkbox">

答案 10 :(得分:0)

这将很有用

$("input[type=checkbox]").change((e)=>{ 
  console.log(e.target.checked);
});