Jquery帮助检查和取消标签点击

Jquery help check and uncheck on label click

本文关键字：标签 取消 帮助 检查和 Jquery      更新时间：2023-09-26

我正在尝试创建一个选中和取消选中标签上的复选框的功能。

这是我的jsfield: http://jsfiddle.net/PTAFG/1/

不能修改HTML

我的HTML: 

<div style="float: left; border: 1px solid rgb(255, 153, 0); width: 198px; margin-top: 2px; background: none repeat scroll 0% 0% rgb(255, 255, 255);">
    <label style="float: left; width: 198px; background: url(&quot;../images/ulabel.png&quot;) repeat-x scroll 0% 0% transparent; height: 35px; margin: 0pt; position: relative;">
        <span style="display: block; font-family: Helvetica; font-weight: bolder; margin-left: 20px; margin-top: 10px; font-size: 12px; width: 120px;">UBGRÆNSET TRAFIK</span>
        <input type="hidden" value="0" name="search[php_is_true]"><input type="checkbox" value="1" style="position: absolute; right: 26px; top: 12px;" name="search[php_is_true]" id="search_php_is_true">
    </label>
    <label style="float: left; width: 198px; background: url(&quot;../images/ulabel.png&quot;) repeat-x scroll 0% 0% transparent; height: 35px; margin: 0pt; position: relative; border-top: 1px solid rgb(255, 153, 0); border-bottom: 1px solid rgb(255, 153, 0);">
        <span style="display: block; font-family: Helvetica; font-weight: bolder; margin-left: 20px; margin-top: 10px; font-size: 12px; width: 120px;">UBGRÆNSET PLADS</span>
        <input type="hidden" value="0" name="search[php_is_true]"><input type="checkbox" value="1" style="position: absolute; right: 26px; top: 12px;" name="search[php_is_true]" id="search_php_is_true">
    </label>
        <label style="float: left; width: 198px; background: url(&quot;../images/ulabel.png&quot;) repeat-x scroll 0% 0% transparent; height: 35px; margin: 0pt; position: relative;">
        <span style="display: block; font-family: Helvetica; font-weight: bolder; margin-left: 20px; margin-top: 10px; font-size: 12px; width: 120px;">HJEMMESIDEPROGRAM</span>
        <input type="hidden" value="0" name="search[php_is_true]"><input type="checkbox" value="1" style="position: absolute; right: 26px; top: 12px;" name="search[php_is_true]" id="search_php_is_true">
    </label>
    </div>
我Jquery: 

$(document).ready(function() {
$('div').click(
    this.closest('input[type="checkbox"]').attr('checked', true);
});
    $t.closest('.checkGroup').find('.payload').toggle( $t.is(':checked'));
    if( !$t.is(':checked') ){
       $t.closest('.checkGroup').find('.payload input[type="checkbox"]')
           .attr('checked',false);
    }
}).trigger('change');

});

您可以使用jQuery prop函数来更改复选框。代码应该是

$('label').bind('click',function(){
  var input = $(this).find('input');  
  if(input.prop('checked')){
    input.prop('checked',false);
  }else{
    input.prop('checked',true);
  }
});
相关文章：