Jquery对多选框的特殊操作

最新推荐文章于 2023-06-10 10:05:50 发布

秀逗的小猫

最新推荐文章于 2023-06-10 10:05:50 发布

阅读量858

点赞数

分类专栏： JQuery 文章标签： jquery user function input

JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种基于鼠标操作的店铺选择项切换机制，当鼠标点击'全部店铺'时，对应行的所有店铺选项被取消选择；反之，当选择具体店铺时，'全部店铺'选项被取消选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求如下：当我鼠标每一行店铺的“全部店铺”，那么具体的每一个店铺的选择项就被设为“未选”，反之，当我选择具体的店铺时，这一行的“全部店铺”的选择项就被设为“未选”。　　

　　具体代码：

$(document).ready(function(){

$('#purviewlist tr').each(

function() {

$(this).find('input[@name="user_purview"]:first').click(

function() {

$(this).parents('tr').find('input[@name="user_purview"]:not(:first)').removeAttr('checked');

}

);

$(this).find('input[@name="user_purview"]:not(:first)').click(

function() {

$(this).parents('tr').find('input[@name="user_purview"]:first').removeAttr('checked');

}

);

}

);

});

</script>

HTML：

</tr>

<tr><td><strong>呼和浩特万达广场</strong></td><td><span style='margin-left:10px;padding-top:10px;'><input type=checkbox class='checkbox' name="user_purview" value="WAND010010all">全部店铺</span><span style='margin-left:10px;padding-top:10px;'><input type=checkbox class='checkbox' name="user_purview" value="WAND0100104001" checked>麦当劳</span><span style='margin-left:10px;padding-top:10px;'><input type=checkbox class='checkbox' name="user_purview" value="WAND0100104002" checked>肯德基</span><span style='margin-left:10px;padding-top:10px;'><input type=checkbox class='checkbox' name="user_purview" value="WAND0100104003">必胜客</span></td></tr><tr><td><strong>北京石景山万达广场</strong></td><td><span style='margin-left:10px;padding-top:10px;'><input type=checkbox class='checkbox' name="user_purview" value="WAND100040all" checked>全部店铺</span><span style='margin-left:10px;padding-top:10px;'><input type=checkbox class='checkbox' name="user_purview" value="WAND1000404001">麦当劳</span><span style='margin-left:10px;padding-top:10px;'><input type=checkbox class='checkbox' name="user_purview" value="WAND1000404002">肯德基</span><span style='margin-left:10px;padding-top:10px;'><input type=checkbox class='checkbox' name="user_purview" value="WAND1000404003">必胜客</span></td></tr><tr></table>