checkbox全选、清除、反选

最新推荐文章于 2022-03-07 22:34:54 发布

原创最新推荐文章于 2022-03-07 22:34:54 发布 · 463 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

js 专栏收录该内容

2 篇文章

订阅专栏

本文详细列举了健康检查的各项指标，包括耳鼻喉、听力、嗅觉、肝功能、既往病史等，覆盖内外科、五官科及身体各部位的全面检查，旨在帮助读者了解全面体检的重要性。

    <div id="choose">
        <label style="font-size: 17px;font-weight: 100"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_erbihou_erbihou" />耳鼻喉</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_erbihou_tingli" />听力</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_erbihou_xiujue" />嗅觉</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_gangongneng" />肝功能</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_jiwangbingshi" />既往病史</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_kouqiang_chune" />唇颚</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_kouqiang_kouchi" />口吃</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_kouqiang_yachi" />牙齿</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_ganzang" />肝脏</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_huxi" />呼吸</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_pizang" />脾脏</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_shenjing" />神经</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_xinzangxueguan" />心脏血管</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_xueya" />血压</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_neike_yingyang" />营养</label><br/>
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_tineihanjinshu" />体内含金属</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_guanjie" />关节</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_jingxiongbu" />颈胸部</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_jizhu" />脊柱</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_pifulinbajie" />皮肤淋巴结</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_sizhi" />四肢</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_toumianbu" />头面部</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_shengao" />身高</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_waike_tizhong" />体重</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_xiongbutoushi" />胸部透视</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_yanjing_jiaozheng" />矫正</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_yanjing_luoyan" />裸眼</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_yanjing_sejue" />色觉</label>&nbsp;&nbsp;
        <label style="font-size: 17px"><input type="checkbox" name="tjx" style="zoom: 130%" value="tj_yanjing_yanbing" />眼病</label>&nbsp;&nbsp;
    </div>
    <input type="button" value="全选" class="btn" id="selectAll"/>
    <input type="button" value="清空" class="btn" id="unSelect"/>
    <input type="button" value="反选" class="btn" id="reverse"/>
</div>

//点击全选
$("#selectAll").click(function () {
    $("#choose input[name='tjx']").prop("checked", true);

});
//点击全不选

$("#unSelect").click(function () {

    $("#choose input[name='tjx']").prop("checked", false);

});
//反选
$("#reverse").click(function () {
    $("#choose input[name='tjx']").each(function () {
        $(this).prop("checked", !$(this).prop("checked"));
    });
    allchk();
});

//函数allchk()就是用来检测全选框#checkAll应该是选中状态还是未选中状态的
function allchk(){
    var chknum = $("#choose input[name='tjx']").size();//选项总个数
    var chk = 0;
    $("#choose input[name='tjx']").each(function () {
        if($(this).prop("checked")==true){
            chk++;
        }
    });
}
//获得所有选中值
$("#getValue").click(function(){
    var valArr = "";
    $("#choose input[name='tjx']").each(function () {
        if($(this).prop("checked")==true){
            valArr+= $(this).val()+",";//转换为逗号隔开的字符串
        }
    });
    alert(valArr);
});
// 当checkbox全部选中时，全选按钮自动选中
$("#choose input[name='tjx']").click(function(){
    allchk();
});