点击盒子改变checkbox状态以及在盒子和checkbox嵌套时阻止默认事件冒泡还有将多选框的值转化为0和1

需求是一个多选题 大概是这样

li里包着的checkbox
因为我觉得移动端就应该点这一大行 就是选中，就给添加了点击这个盒子，checkbox就被选中
页面是这样的

 	<li>
       <input id="game1" type="checkbox" name="game" class="check_input">
       <label for="game1" onclick="stopDefault()"></label>
      <p>bilbalssd</p>
	</li>

 $('.games li').eq(0).click(function () {        
            if ($("#game1[type='checkbox']").prop('checked') == false) {
                $('#game1').prop('checked', true)
            } else {
                $('#game1').prop('checked', false)
            }
        })

本来以为这样就可以了，但我需要获取这个box里的选项，并转为0和1发送给后台
查了下，加上了这些

 $('.games li').eq(0).click(function () {        
            //改变value值
            i = $(this).find('input').val();
            if (i == 0) {
                $(this).find('input').val('1')
            } else {
                $(this).find('input').val('0')
            }
            //点击盒子，改变checkbox状态
            if ($("#game1[type='checkbox']").prop('checked') == false) {
                $('#game1').prop('checked', true)
            } else {
                $('#game1').prop('checked', false)
            }

再给input加上value

 	<li>
       <input id="game1" type="checkbox" name="game" value='0' class="check_input">
       <label for="game1" onclick="stopDefault()"></label>
      <p>bilbalssd</p>
	</li>

但是在精准点击checkbox时，会触发两次这个改变，就出问题了
这时候就要阻止这个checkbox了，不让他被点到，加一个阻止默认事件的方法

给input加上onclick="stopDefault()"

方法

function stopDefault(e) { //console.log(e.preventDefault);  
        //阻止默认浏览器动作(W3C)  
        if (e && e.preventDefault) {
            //alert(e.preventDefault);  
            e.preventDefault();
        } else { //IE中阻止函数器默认动作的方式  
            window.event.returnValue = false;
        }
        return false;
    }

就好了

最后

以上就是文静夏天最近收集整理的关于点击盒子改变checkbox状态以及在盒子和checkbox嵌套时阻止默认事件冒泡还有将多选框的值转化为0和1的全部内容，更多相关点击盒子改变checkbox状态以及在盒子和checkbox嵌套时阻止默认事件冒泡还有将多选框内容请搜索靠谱客的其他文章。