jquery让复选框选中,jquery复选框选中状态

用jquery把复选框checkbox选中的值放入input框中

1、新建一个html文件，命名为test.html。

2、在test.html文件内，在p标签内，使用input标签创建一个checkbox选项和一个文本框，并且文本框设置默认值。

3、在test.html文件内，给每一个checkbox类型input元素设置name属性，统一设置为ck，主要用于下面通过该name获得input对象。

4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“获得input值”。

5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getinput（）函数。

6、在js标签中，创建getinput()函数，在函数内，通过“:checked”选择器获得被选中的checkbox对象，使用next()方法获得checkbox相邻的input文本框对象，通过val()方法获得它的值。最后，使用alert()方法输出input的值。

7、在浏览器打开test.html文件，点击按钮，查看结果。

相关问答

Q1: Jquery实现复选框全选与全不选

1、首先web项目结构如图所示，这个结构熟悉的话可以自己调整的。

2、然后设置一些较为简单的选项框，这里随便用abcd来代替选项框了。

3、这里是jq来实现全选，所以引入jQuery，并且给按钮绑定一个jQuery类型的点击事件即可。

4、然后通过prop来设置input的属性即可设置全选了，prop是jq自带的一个方法。

5、因为CheckBox可以设置checked属性，所以我们把它设置为true即可。

6、最后预览，可以看到CheckBox都被checked中了，这样就达到全选了。

Q2: jquery让复选框选中怎么做

首先  你要分清Jquery中  prop和attr 的区别

借鉴网站 

我举一个例子  就是全选/反选的情况   如果你是用jquery中的attr来进行选中的话   第一次可以选中   但当你第二次点击全选的时候  就没有反应了    子复选框  不会有任何反应

但是如果你用的是prop 就没有这么多顾虑了  直接使用就可以  废话不多说  直接贴代码验证

body

    div class="panel"

        div class="panel-body"

            input type="checkbox" id="chkAll" /全选

            ul

                liinput type="checkbox" id="chkName1" name="chkFruit" /苹果/li

                liinput type="checkbox" id="chkName2" name="chkFruit" /香蕉/li

                liinput type="checkbox" id="chkName3" name="chkFruit" /桃子/li

                liinput type="checkbox" id="chkName4" name="chkFruit" /荔枝/li

            /ul

        /div

    /div

/body

script type="text/javascript"

    $(function () {

        //全选

        $("#chkAll").change(function () {

            $("input[name='chkFruit']").prop("checked", $(this).prop("checked"));       //成功

            $("input[name='chkFruit']").attr("checked", $(this).prop("checked"));       //第一次选中成功  第二次  子复选框没有反应

        });

        //全部选中

        //$("input[name='chkFruit']").prop("checked", "checked");

        //eq(index)   Index索引从0开始  选中第一个

        //$("input[name='chkFruit']").eq(0).prop("checked", "checked");

    });

/script