Question

我当前正在使用表单向导：

<form name="example-1" id="wrapped" action="" method="POST">
     <div id="middle-wizard">
           <div class="step">
           </div>
           <div class="step">
           </div>
           <div class="step">
                <div class="row">
                    <div class="col-md-6">
                         <ul class="data-list-2 clearfix">
                               <li><input name="information[]" id ="other_info" class="otherInfo check_radio" type="checkbox"  value="Others"><label>Others</label></li>
                         </ul>
                    </div>
                </div>
           </div>
     </div>


<div id="bottom-wizard">
            <button type="button" name="backward" class="backward"> Backward </button>
            <button type="button" name="forward" class="forward"> Forward </button>
</div>
</form>

我正在尝试检查该复选框是否已选中。我要做的第一件事是控制台记录该复选框的ID。

控制台将返回复选框，但是当我尝试在复选框ID上创建click函数时，on click函数不会引发控制台日志。

这是我尝试过的on click函数的示例：

console.log('#other_info')
    $("#other_info").click(function(){
        if(!$(this).is(':checked'))
        {
            console.log('yes its checked')
        }
        else
        {
            console.log('no its not!!')
        }
    })

此表单将iCheck自定义插件用于复选框，因此正常的单击或更改功能将不起作用。通过使用ichecked提供的自定义功能解决了问题

Answer 1

在这种情况下，您不应使用click侦听器，而应使用change 听众。我相信使用起来会更有效率。

下面是一个代码片段，供您快速摘取（working Fiddle）：

document.querySelector('#wrapped').addEventListener('change', function(event) { 
  const allClicked = this.querySelectorAll('input[type="checkbox"]:checked')
  console.log(allClicked)

  console.log(`Chief, I am clicked: ${event.target}!`) // Show what is currently being clicked
})

您也可以在我的类似回复中阅读有关此主题的更多信息： How to count every checked checkboxes

这是一个更复杂的小提琴：https://jsfiddle.net/mkbctrlll/yak4oqj9/159/

内部有3种可能的方法来解决问题。希望这会有所帮助

Answer 2

尝试使用“更改”而不是单击

   $('#other_info').change(function() {
        if(this.checked) {

             console.log('yes its checked')
        }
      else
         {
     console.log('no its not!!')
         }

    });

Answer 3

由于我的表单正在使用自定义复选框插件，因此正常的更改/点击功能将无法正常工作。

不知道此表单使用的是自定义复选框，因此我没有在第一个问题中添加它。

如此

代替使用此功能：

     <ListView
            ItemsSource="{Binding reports, Mode=TwoWay}" 
             HasUnevenRows="True" ItemTapped="ListView_ItemTapped" 
                VerticalOptions="Center" SeparatorVisibility="Default" 
                  SeparatorColor="Black" x:Name="listview">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                    <Frame Padding="0.20" Margin="2">

                            <Grid x:Name="gridview">

                            <BoxView Grid.Column="0" Grid.Row="0" BackgroundColor="Black" WidthRequest="1" VerticalOptions="Center" HorizontalOptions="End"/>
                            <Label Text="{Binding Governerate}" Grid.Column="0"/>
                            <BoxView Grid.Column="1" Grid.Row="0" BackgroundColor="Black" WidthRequest="1" VerticalOptions="Center" HorizontalOptions="End"/>
                            <Label Text="{Binding VisitCount}" Grid.Column="2" x:Name="visitcounts" TextColor="Red"/>
                            <BoxView Grid.Column="2" Grid.Row="0" BackgroundColor="Black" WidthRequest="1" VerticalOptions="Center" HorizontalOptions="End"/>
                            <Label Text="{Binding item outside itemsource}" Grid.Column="3"/>
                            <Label  Grid.Column="1"/>
                        </Grid>
                    </Frame>
                </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

我改用此功能：

$('#other_info').on('change', function(event) {
    var checkboxChecked = $(this).is(':checked');

    if(checkboxChecked) {
        alert("checked");      
    }else{
        alert("un-checked");
    }
});

使用表单向导检测是否单击了复选框

3 个答案: