1. 首页 > 科技

checkbox在div内部,点击div可以切换checkbox的选中状态,但是点击checkbox时没反应?(当checkbox选中时,按钮才能点击。chec

checkbox在div内部,点击div可以切换checkbox的选中状态,但是点击checkbox时没反应?(当checkbox选中时,按钮才能点击。checkbox没有被选中时,按钮为不能点击的状态,用JS要怎么写onclick)

当checkbox选中时,按钮才能点击。checkbox没有被选中时,按钮为不能点击的状态,用JS要怎么写onclick

&lt;html&gt;<br>&lt;head&gt;<br>&lt;title&gt;change BG color&lt;/title&gt;<br>&lt;/head&gt;<br>&lt;script&gt;<br>function btnAction(){<br>alert(document.getElementById(&quot;xz&quot;).disabled);<br><br>alert(2);<br>}<br>function check(){<br>    //判断checkbox有没有被选中<br>if(document.getElementById(&quot;ch&quot;).checked==true)<br>{<br>document.getElementById(&quot;xz&quot;).disabled=&quot;&quot;;//给BUTTON按钮的disabled属性赋值<br><br>}else<br>{<br>document.getElementById(&quot;xz&quot;).disabled=&quot;disabled&quot;;<br>}<br><br>}<br><br>&lt;/script&gt;<br>&lt;body&gt;<br>&lt;input type=&quot;button&quot; value=&quot;选择&quot; onclick=&quot;btnAction()&quot; id=&quot;xz&quot;  disabled=&quot;disabled&quot;/&gt; <br>&lt;input name=&quot;check&quot; id=&quot;ch&quot; type=&quot;checkbox&quot; onclick=&quot;check()&quot;/&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;

checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        div

        {

            display: inline-block;

            width: 100px;

            margin-left: 10px;

        }

    </style>

    <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>

    <script>

        //注册checkbox的click事件

        $(document).on('click', ':checkbox', function (e) {

            //停止事件冒泡,当点击的是checkbox时,就不执行父div的click

            e.stopPropagation();

            //checkbox选中,div变色,否则不变色

            $(this).prop('checked') ? 

            oCk.parent().css('background-color', 'blue') 

            : oCk.parent().css('background-color', '');

        });

        //注册div的click事件,点击div时动态执行checkbox的click事件

        $(document).on('click', 'div', function () {

            $(this).find(':checkbox').click();

        })

    </script>

</head>

<body>

    <div>

        <input type="checkbox" />A

    </div>

    <div>

        <input type="checkbox" />B

    </div>

    <div>

        <input type="checkbox" />C

    </div>

</body>

</html>

js中多选中单击行能选中,但是单击那个框时不能选中怎么办?

我也遇到过这种情况,应该是你把checkbox放到了判断行文字是否点击选中的内部了,点击选中文字的div覆盖了checkbox导致多选框无法点击选中,

类似

<li>

    <div onclick="选中函数()">

        <input type="checkbox" >

    </div>

</li>

有一个问题是:第一次点击全选时不能选中所有的checkbox,之后的click均能执行。望各位大神给予解答~

1、你的写法有问题的,$('#selectAll').click事件触发时,你获取到的$('#selectAll').prop('checked')值未必是你要的值,所以你要直接写成true。

2、没有必要监听div1的change事件。

3. 建议这么写:

// 全选

$('#selectAll').click(function(){

    $(this).parent().siblings().find('input[type=checkbox]').prop("checked",true);

    $('#unselAll').prop('checked',false);

});