<div class="task-checkbox" id="ckbA" onclick="funDivCheck('ckbA')" > <input type="radio" value="A" name="fruit" onclick="funCheck1()" /> A、<span class="task-title-sp" id="xuanxiangA"> 选项1 </span> </div> 上面代码,使用jQuery代码实现以下效果: 当点击input元素的时候,不在触发ckbA的click事件,要怎么做
时间: 2024-02-14 08:32:27 浏览: 15
你可以使用`event.stopPropagation()`方法来阻止事件冒泡,而实现点击input元素时不触发ckbA的click事件。具体的实现代码如下:
```javascript
$(document).ready(function() {
$('#ckbA input').click(function(event) {
event.stopPropagation();
});
});
```
这样,当点击`#ckbA`下的input元素时,click事件不会冒泡到父元素`#ckbA`,从而不会触发`#ckbA`的click事件。
相关问题
<div class="task-checkbox" id="ckbA" onclick="funDivCheck()" > <input type="radio" value="A" name="fruit" /> A、<span class="task-title-sp" id="xuanxiangA"> 选项1 </span> </div> 使用jQuery,获取div下面的子元素input是否选中了
使用 jQuery,你可以使用 `prop()` 方法来检查 `<input>` 元素是否被选中。下面是一个例子,演示如何获取 `<div>` 下的子元素 `<input>` 是否被选中:
```javascript
var isChecked = $('#ckbA input[type="radio"]').prop('checked');
```
在上述代码中,`#ckbA` 是 `<div>` 元素的 ID,`input[type="radio"]` 是选择 `<div>` 下的 `<input>` 类型为 "radio" 的元素。`prop('checked')` 方法用于获取该元素的选中状态,返回一个布尔值。
如果 `isChecked` 的值为 `true`,则表示被选中;如果为 `false`,则表示未被选中。
希望这对你有所帮助!如果还有其他问题,请随时提问。
<div class="cart-thead"> <div class="t-checkbox"> <input type="checkbox" name="" id="" class="checkall"> 全选 </div> <div class="t-goods">商品</div> <div class="t-price">单价</div> <div class="t-num">数量</div> <div class="t-sum">小计</div> <div class="t-action">操作</div> </div>改成组件
好的,我可以帮你将这段代码改成一个组件,你可以参考下面的代码:
```js
// CartThead.js
import React from 'react';
function CartThead() {
return (
<div className="cart-thead">
<div className="t-checkbox">
<input type="checkbox" name="" id="" className="checkall" /> 全选
</div>
<div className="t-goods">商品</div>
<div className="t-price">单价</div>
<div className="t-num">数量</div>
<div className="t-sum">小计</div>
<div className="t-action">操作</div>
</div>
);
}
export default CartThead;
```
然后在其他组件中引入 `CartThead` 组件即可:
```js
// OtherComponent.js
import React from 'react';
import CartThead from './CartThead';
function OtherComponent() {
return (
<div>
<CartThead />
{/* 其他内容 */}
</div>
);
}
export default OtherComponent;
```