how can i check uncheck functionality in jquery in checkboxlist?
I have a checkbox list I need to impl开发者_JAVA百科ement the check uncheck functionality like. When some one click on Όχι(none) all check box will be uncheck.
<TABLE id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages class=ms-authoringcontrols border=0>
<TBODY>
<TR>
<TD vAlign=top><INPUT style="PADDING-LEFT: 5px" id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_0 CHECKED type=checkbox name=ctl00$m$g_0a9e1440_6a3d_47b2_9ccb_dd6176913570$ctl00$ddlSpeakForeignLanguages$0></TD>
<TD><LABEL for=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_0>Όχι</LABEL></TD>
<TD vAlign=top><INPUT style="PADDING-LEFT: 5px" id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_4 type=checkbox name=ctl00$m$g_0a9e1440_6a3d_47b2_9ccb_dd6176913570$ctl00$ddlSpeakForeignLanguages$4></TD>
<TD><LABEL for=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_4>Αλβανικά</LABEL></TD>
<TD vAlign=top><INPUT style="PADDING-LEFT: 5px" id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_7 type=checkbox name=ctl00$m$g_0a9e1440_6a3d_47b2_9ccb_dd6176913570$ctl00$ddlSpeakForeignLanguages$7></TD>
<TD><LABEL for=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_7>Ισπανικά</LABEL></TD></TR>
<TR>
<TD vAlign=top><INPUT style="PADDING-LEFT: 5px" id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_1 type=checkbox name=ctl00$m$g_0a9e1440_6a3d_47b2_9ccb_dd6176913570$ctl00$ddlSpeakForeignLanguages$1></TD>
<TD><LABEL for=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_1>Αγγλικά</LABEL></TD>
<TD vAlign=top><INPUT style="PADDING-LEFT: 5px" id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_5 type=checkbox name=ctl00$m$g_0a9e1440_6a3d_47b2_9ccb_dd6176913570$ctl00$ddlSpeakForeignLanguages$5></TD>
<TD><LABEL for=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_5>Ρώσικα</LABEL></TD>
<TD vAlign=top><INPUT style="PADDING-LEFT: 5px" id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_8 type=checkbox name=ctl00$m$g_0a9e1440_6a3d_47b2_9ccb_dd6176913570$ctl00$ddlSpeakForeignLanguages$8></TD>
<TD><LABEL for=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_8>Ιταλικά</LABEL></TD></TR>
<TR>
<TD vAlign=top><INPUT style="PADDING-LEFT: 5px" id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_2 type=checkbox name=ctl00$m$g_0a9e1440_6a3d_47b2_9ccb_dd6176913570$ctl00$ddlSpeakForeignLanguages$2></TD>
<TD><LABEL for=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_2>Γαλλικά</LABEL></TD>
<TD vAlign=top><INPUT style="PADDING-LEFT: 5px" id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_6 type=checkbox name=ctl00$m$g_0a9e1440_6a3d_47b2_9ccb_dd6176913570$ctl00$ddlSpeakForeignLanguages$6></TD>
<TD><LABEL for=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_6>Ουκρανικά</LABEL></TD>
<TD vAlign=top><INPUT style="PADDING-LEFT: 5px" id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_9 type=checkbox name=ctl00$m$g_0a9e1440_6a3d_47b2_9ccb_dd6176913570$ctl00$ddlSpeakForeignLanguages$9></TD>
<TD><LABEL for=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_9>Τούρκικα</LABEL></TD></TR>
<TR>
<TD vAlign=top><INPUT style="PADDING-LEFT: 5px" id=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_3 type=checkbox name=ctl00$m$g_0a9e1440_6a3d_47b2_9ccb_dd6176913570$ctl00$ddlSpeakForeignLanguages$3></TD>
<TD><LABEL for=ctl00_m_g_0a9e1440_6a3d_47b2_9ccb_dd6176913570_ctl00_ddlSpeakForeignLanguages_3>Γερμανικά</LABEL></TD>
<TD vAlign=top></TD>
<TD vAlign=top></TD></TR></TBODY>
</TABLE>
I think what you're looking for is this:
$('table :checkbox:first').change(function() {
if(this.checked)
$('table :checkbox:gt(0)').attr('checked', false);
});
$('table :checkbox').change(function() {
$('table :checkbox:first')
.attr('checked', $('table :checkbox:gt(0):checked').length == 0);
});
You can give it a try here, it has the following behavior:
- When you uncheck everything, "none" checks itself
- When you check anything besides "none", it clears the "none" check
- You can't uncheck "none" alone...only checking another checkbox will uncheck "none"
This should ensure the correct input and be fairly intuitive, give it a shot see how you like it.
精彩评论