显示 jQuery 复选框选择

Displaying jQuery checkbox selection

本文关键字：选择 复选框 jQuery 显示      更新时间：2023-09-26

加载页面后，此网页当前显示来自 rss 源的"全部"类别的数据。我的问题是我希望用户选择和显示几个类别。总共有 10 个类别，每个类别对应于一个单独的 rss 源。谁能解释一下我如何处理这个事件？此外，如果选择了其中一个类别，它是否会自动覆盖正在显示的当前数据？如果需要，我会详细说明任何不清楚的部分。谢谢！

<!DOCTYPE html> 
<html>
<head>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
            type: 'GET',
            url: '/example',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find("item").each(function () {
                    var title = $(this).find("title").text();
                    var description = $(this).find("description").text();
                    var linkUrl = $(this).find("link").text();
                    //var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
                      var displaytitle = "<a href='" + linkUrl + "' target='_blank'>" + title + "</a>"  
                    $('#feedContainer').append('<h3>'+displaytitle+'</h3><p>'+description+'</p>');
                });
            }
        });
});
</script>
</head> 
<body> 
<div data-role="page" id="page">
<!-- /field panel -->
    <div data-role="panel" id="fieldpanel" data-position="left" data-display="push">
        <ul data-role="listview" data-inset="true" data-filter="false">
           <fieldset data-role="controlgroup">
        <legend>Categories</legend>
        <input type="checkbox" name="checkbox-bio" id="checkbox-bio">
        <label for="checkbox-bio">Bioengineering</label>
        <input type="checkbox" name="checkbox-com" id="checkbox-com">
        <label for="checkbox-com">Communications</label>
        <input type="checkbox" name="checkbox-eleP" id="checkbox-eleP">
        <label for="checkbox-eleP">Electrical/Power</label>
         <input type="checkbox" name="checkbox-eleD" id="checkbox-eleD">
        <label for="checkbox-eleD">Electronics/Design</label>
         <input type="checkbox" name="checkbox-nano" id="checkbox-nano">
        <label for="checkbox-nano">NanoEngineering</label>
         <input type="checkbox" name="checkbox-opt" id="checkbox-opt">
        <label for="checkbox-opt">Optics/Display</label>
         <input type="checkbox" name="checkbox-semi" id="checkbox-semi">
        <label for="checkbox-semi">Semiconductors</label>
    </fieldset>
        </ul>
    </div><!-- /field panel -->
      <!-- /settings panel -->
     <div data-role="panel" id="settingspanel" data-position="right" data-display="push">
        <ul data-role="listview" data-inset="true" data-filter="false">
          <li><a href="http://">Join IEEE</a></li>
          <li><a href="http://"> subscription services</a></li>
        </ul>
    </div><!-- /settings panel -->

    <div data-role="header" data-theme="b">
    <a href="#fieldpanel" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-inline="true">Menu</a>
    <a href="#settingspanel" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">Settings</a>
    <h1>MOBILE</h1>
</div>
    <div data-role="content">   
        <div id="feedContainer"></div>  
        <h3></h3>
        <p></p>
    </div>
    <div data-role="footer">
        <h4>Advertisements</h4>
    </div>
</div>

</body>
</html>

我假设你想获取有关此代码的基本信息！

好的，首先要处理的是要显示的数据类型。

<input type="checkbox" id="1" />
<input type="checkbox" id="2" />

让我们从 2 而不是 10 开始！这方面的jQuery代码很容易理解。

$('input[type=checkbox]').click(function () { // click on checkbox
   var val = $(this).attr('id'); // get its id as value
   if(val == '2') {
      $('someelement).html('2 was selected');
      $('#1').prop('checked', false); // unselect the other one
   }
}

因此，这是在复选框上发生单击事件时将执行的基本代码。现在在你的代码中，你将使用类似ajax的东西，然后在.html()之前添加ajax请求代码，并在那里编写响应。

要更新显示的内容，只需使用一个元素作为应用的基本剪贴板。为什么？因为每次获取数据时，都需要用该内容替换当前内容，这样您将只获得当前数据;所选数据。

让我们尝试代码中的一个复选框：

<input type="checkbox" name="checkbox-bio" id="checkbox-bio">
<label for="checkbox-bio">Bioengineering</label>
<input type="checkbox" name="checkbox-com" id="checkbox-com">
<label for="checkbox-com">Communications</label>

现在让我们处理 jQuery

$('input[type="checkbox"]').click(function () {
  // and all others will be here just as they are.. to check the id
  // your ajax request is perfect, just copy paste that here..:)
});

但是只需要在那里进行更改，而不是发送相同的请求，请尝试在那里再添加一件事， 

$.ajax({ 
  // url and datatype here,
  data: value
  // success function goes here
});

请注意，该值是我们从复选框中获取的变量。这将与请求一起发送，以便您只能处理 RSS 的必要部分并保留所有其他部分，就像if else块一样。

这是这个 http://jsfiddle.net/afzaal_ahmad_zeeshan/KU9JT/的工作小提琴。

但很抱歉，我没有包含 if else 块以使代码按预期工作。但你会明白如何操纵它。

相关文章：