input圆形多选按钮状态改变(checked)与点击触发事件的优先顺序

在做一个购物车功能中货物圆形多选按钮选中时获取它的价格遇到的问题:


首先是这个圆形按钮问题:


在input上面设置width、height、border-radius等属性,

input{
    height:30px;
    width:30px;
    border-radius:50%;
}
就是不生效;

捯饬半天,终于出来一个方法;

html:

<div>
	<input type="checkbox" id="mm">
	<label for="mm">12123</label>
</div>

css:

<style>
		input{
			display: none;
		}
		label{
			display: block;
		    width: 50px;
		    height: 50px;
		    background: #f00;
		    border-radius: 50%;
		}
		input:checked + label{
			background: #26ca28;
		}

	</style>

然后就是多选按钮选中时获取它的价格的问题:

比如要在多选按钮选中后执行函数A(找到已被选择input的某个兄弟元素);同时,多选按钮在点击后有一个click事

件触发函数B(label变色);

最初的写法:

$('label').click(function(){
    //函数B<span style="color: rgb(52, 52, 52); font-family: "Source Code Pro", monospace;font-size:18px; white-space: pre-wrap;">(label变色)</span>;
   //函数A<span style="color: rgb(52, 52, 52); font-family: "Source Code Pro", monospace;font-size:18px; white-space: pre-wrap;">(找到已被选择input的某个兄弟元素)</span>;
})
结果: 函数B (label变色)执行;

而函数A(找到已被选择input的兄弟元素)


执行之后得到的是一个空数组;这就有些苦恼了(js中input没有checked这个事件 )。

查了一些资料,好像是说点击之后click事件会在input改变自身属性之前执行,执行顺序click>checked;

也就是执行函数A 的时候,input多选框的checked属性还没有增加上, 当然得到的是空数组了。

还有:

jquery 1.5 之前,click()会先改变checkbox状态,再触发 click事件,这就是我 想要的结果。

1.5之后 click事件先于属性改变触发,因为其在执行 click() 方法的时候实际上是走了 trigger ,jquery先走了内部事件系统找到了回调函数执行,再执行的浏览器原生的 click()方法来触发checkbox属性变化。(原来如此)


天真的我一度想找到一个方法让checked属性先改变,然后让click事件在执行,然而并没有什么结果 。

最后看到了监听change事件:


$('input').change(function(){
    //函数A<span style="color: rgb(52, 52, 52); font-family: "Source Code Pro", monospace;font-size:18px; white-space: pre-wrap; line-height: 29.7px;">(找到已被选择input的某个兄弟元素)</span>

})
这样当我点击label的时候,label会变色,同时input的checked属性改变,执行函数A (找到已被选择input的某个兄

弟元素)。请各位大神多多指教!


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值