tdをクリックしたら関連するチェックボックスをチェック済みにしたい

tdをクリックしたらtd内のテキストのチェックボックスをチェック済みにしたいのですがうまくいきません。


<!DOCTYPE html>

<table>
 
 <td>1 <input type="checkbox" class="num" name="num[]" id="1"></td>
 <td>2 <input type="checkbox" class="num" name="num[]" id="2"></td>
 <td>3 <input type="checkbox" class="num" name="num[]" id="3"></td>
 <td>4 <input type="checkbox" class="num" name="num[]" id="4"></td>
 <td>5 <input type="checkbox" class="num" name="num[]" id="5"></td>
     
     
 
</table>
<input class="ef">

<style>

.active{background-color:yellow;}
 body{
     
 }

td{
  border:solid 1px black;
}

</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
         $('td').on('click',function(){
             
             $(this).toggleClass('active');
             var data=$(this).text();
             $('.ef').val(data);
         
        
             $('.num[id=data]').prop('checked',true);
             
         })
         
     
</script>

id=dataの部分がおかしいのでしょうか。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

<script>
            $('td').on('click',function(){
                $(this).toggleClass('active');
                $(this).find('input').prop('checked', !$(this).find('input').prop('checked'));

            })


</script>

投稿2019/07/24 23:13